<template>
  <div id="plot-container">
    <PlotVector ref="pVec"></PlotVector>
    <!-- 工具栏 -->
    <div id="plottPanel" v-drag v-show="showPanel">
      <div class="panel-header">
        <!-- 标题头 -->
        <span class="panel-title">军标信息面板</span>
        <span class="panel-tool"
          ><a href="javascript:void(0)" @click="onShowTabs" id="xbtn"
            >⇅</a
          ></span
        >
      </div>
      <div id="panel-body" v-show="showCtrl">
        <div class="toolgrid">
          <label for="plotid">军标ID:</label>
          <input type="text" name="ploti" id="plotid" class="w140" />
        </div>
        <div v-show="svgPlot">
          <!-- svg军标 -->
          <div class="toolgrid">
            <label for="plotcolor">颜色:</label>
            <input type="text" name="color" id="plotcolor" class="w36" />
            <label for="">位置:</label>
            <input type="text" name="lon" id="plotlon" class="w36" />
            <input type="text" name="Lat" id="plotlat" class="w36" />
          </div>
          <div class="toolgrid">
            <label for="plotrotate">旋转:</label>
            <input type="text" name="rotate" id="plotrotate" class="w58" />
            <label for="plotscale">缩放:</label>
            <input type="text" name="scale" id="plotscale" class="w58" />
          </div>
        </div>
        <!-- svg军标 end -->
        <!-- 新扩展部分结束 -->
        <!-- <hr>基本军标样式 -->
        <hr style="margin: 0" />
        <div v-show="svgBase">
          <div class="toolgrid">
            <label for="plotfill">填充颜色:</label>
            <!--input type="text" name="fill" id="plotfill" class ="w36"/-->
            <input
              type="text"
              list="fillcolor"
              name="fill"
              id="plotfill"
              class="w36"
            />
            <datalist id="fillcolor">
              <option>#ff0000</option>
              <option>#00ff00</option>
              <option>#0000ff</option>
              <option>#ff60af</option>
              <option>#000000</option>
              <option>#ffffff</option>
              <option>rgba(0,0,0,0)</option>
            </datalist>
            <label for="plotstroke">描边色:</label>
            <!-- input type="text" name="stroske" id="plotstroke" class ="w36"/ -->
            <input
              type="text"
              list="stroskecol"
              name="stroske"
              id="plotstroke"
              class="w36"
            />
            <datalist id="stroskecol">
              <option>#ff0000</option>
              <option>#00ff00</option>
              <option>#0000ff</option>
              <option>#ff60af</option>
              <option>#000000</option>
              <option>#ffffff</option>
              <option>rgba(0,0,0,0)</option>
            </datalist>
          </div>
          <div class="toolgrid">
            <label for="plotwidth">边宽:</label>
            <input type="text" name="width" id="plotwidth" class="w58" />
            <label for="plotdline">虚线:</label>
            <input type="text" name="dline" id="plotdline" class="w58" />
          </div>
          <hr />
        </div>
        <!-- 文字 -->
        <div class="toolgrid">
          <label for="plottxt">文本:</label>
          <!-- <input type="text" name="txt" id="plottxt" class ="w155"/> -->
          <textarea name="txt" id="plottxt"></textarea>
        </div>
        <div class="toolgrid">
          <label for="plotfont">字体:</label>
          <input type="text" name="font" id="plotfont" class="w155" />
        </div>
        <div class="toolgrid">
          <label for="plotsize">字号:</label>
          <!-- <input type="text" name="size" id="plotsize" class ="w58"/> -->
          <input
            type="text"
            list="fntsize"
            name="size"
            id="plotsize"
            class="w58"
          />
          <datalist id="fntsize">
            <option>16px</option>
            <option>18px</option>
            <option>22px</option>
          </datalist>
          <label for="plotweight">粗细:</label>
          <!-- <input type="text" name="weight" id="plotweight" class ="w58"/> -->
          <input
            type="text"
            list="fntweight"
            name="weight"
            id="plotweight"
            class="w58"
          />
          <datalist id="fntweight">
            <option>bold</option>
            <option>normal</option>
          </datalist>
        </div>
        <!--div class = "toolgrid">
          <label for="plottxt"><input type="checkbox" name="rotatable" id="rotatable" value="" />启用旋转</label>
          <input type="text" name="txtrotate" id="plotrotate" class ="w120"/>
        </div -->
        <div v-show="true">
          <hr />
          <div class="toolgrid boot">
            <button type="button" id="plotdel" @click="addFlag()">
              添加旗帜</button
            >&nbsp;
            <button type="button" id="plotdel" @click="delFlag()">
              删除旗帜</button
            >&nbsp;
          </div>
        </div>

        <div class="bottomline"></div>
        <div class="showBox" style="height: 16px; background: #f0f0f0">
          <!-- 显示隐藏默认属性 ***-->
          <span
            class="showbtn"
            style="font-family: 'Microsoft Yahei'; font-size: 12px"
            ><a
              href="javascript:void(0)"
              @click="onShowBase"
              id="showbtn"
              style="color: black"
              >扩展功能</a
            ></span
          >
        </div>
        <div class="toolgrid" v-show="showBase">
          <label for="plotunit">默认尺寸:</label>
          <input type="text" name="bunit" id="baseunit" class="w36" />
          <label for="plotstroke">默认线宽:</label>
          <input type="text" name="bstroke" id="basestroke" class="w36" />
          <div class="baseBtnBox">
            <button type="button" id="loadbasebtn" @click="loadBase()">
              刷新</button
            >&nbsp;
            <button type="button" id="savebasebtn" @click="saveBase()">
              保存
            </button>
          </div>
          <hr />
          <!-- 行政区域显示开始 -->
          <label for="areaname">区域名称:</label>
          <input type="text" name="aname" id="areaname" class="w120" />
          <div class="baseBtnBox">
            <button type="button" id="loadbasebtn" @click="displayArea()">
              加载</button
            >&nbsp;
            <button type="button" id="savebasebtn" @click="clearArea()">
              删除
            </button>
          </div>
          <hr />
          <!-- 行政区域显示结束 -->
          <div class="baseBtnBox">
            <button type="button" id="loadbasebtn" @click="plotUnion()">
              合并范围</button
            >&nbsp;
            <button
              type="button"
              id="savebasebtn"
              @click="showUnionRange(true)"
            >
              显示
            </button>
            <button
              type="button"
              id="savebasebtn"
              @click="showUnionRange(false)"
            >
              隐藏
            </button>
          </div>
        </div>
        <!-- 用来绘制分割线 -->
        <div class="bottomline"></div>
        <!-- 新添加的扩展部分 -->
        <PopExt ref="iPopExt"></PopExt>
        <hr style="margin: 0" />
        <!-- 新添加的弹出气泡信息 -->
        <PopInfo ref="iPopInfo"></PopInfo>
        <hr style="margin-top: 0" />
        <!-- 按钮 -->
        <div class="toolgrid boot">
          <!-- input type="button" value="删除军标" id="plotdel"/ -->
          <!-- input type="button" value="确定" id="plotok" class ="w58"/-->
          <span style="display: inline-block; width: 50px"></span>
          <button type="button" id="plotdel" @click="delPlot()">删除军标</button
          >&nbsp;
          <!-- <button type="button" id="plotdel" @click="addText()">添加文字</button>&nbsp; -->
          <button
            type="button"
            style="width: 60px"
            id="plotok"
            @click="okPlot()"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as olProj from "ol/proj"; // 坐标变换使用
// import Style from 'ol/style/Style'
// import Text from 'ol/style/Text'
import { Fill, Stroke, Circle as CircleStyle, Style, Text } from "ol/style"; // 注意CircleStyle是样式
// import DragPan from 'ol/interaction/DragPan'
// import Draw from 'ol/interaction/Draw'
import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";
import Point from "ol/geom/Point";
import LineString from "ol/geom/LineString";
import geoCircle from "ol/geom/Circle"; // 注意geoCircle是圆形
import Polygon from "ol/geom/Polygon";
// import MultiLineString from 'ol/geom/MultiLineString'
import GeometryCollection from "ol/geom/GeometryCollection";
// import GeoJSON from 'ol/format/GeoJSON'
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";

import PlotVector from "./plotVector.vue";
import PopInfo from "./plotPop.vue"; // 新添加的弹出气泡信息
import PopExt from "./plotExt.vue"; // 扩展功能（新）
import { plot } from "./plotting.js";
import { point } from "@turf/turf";
// 交互
import {
  defaults as defaultInteractions,
  Pointer as PointerInteraction,
} from "ol/interaction";
import * as turf from "@turf/turf";
// 混入
import PlotPanel from "./plotPanel.js"; // 面板控制方法
import PlotSaveLoad from "./plotSaveLoad.js"; // 军标数据保存，载入方法
import sol4plotting from "@/components/ol/plugin/sol4plotting.js"; // 方案军标功能
import { defineComponent, getCurrentInstance } from "vue";

let proxy

export default defineComponent({
  mixins: [PlotPanel, PlotSaveLoad, sol4plotting],
  components: { PlotVector, PopInfo, PopExt },
  data() {
    return {
      iMap: null,
      iUser: "master", // 标绘用户
      sSRS: "EPSG:4326", // 空间参照系（Spatial Reference System) // 注意：RCS 地图当前的坐标系统
      plottingLayer: null, // 标绘层
      iDraw: null, // 创建的Draw，交互绘制用
      currColor: null,
      strokeWidth: 2, // 缺省军标线宽
      altNum: 0, // 控制点数量，用于控制点的计数及索引（查找时使用-添加控制点时递增；删除控制点时归零）
      defStyle: null, // 默认样式；
      defBlue: null,
      iStyle: null, // 使用的样式；defStyle默认，用一个即可
      iStyleName: null, // 当前正在使用的样式名称
      iStyleList: {}, // 军标点标识的样式列表
      iPlottList: [], // 保存绘制的所有图标
      iPlotSvgArr: [], // 关联数组--保存所有调入的SVG数据（快速查找使用）
      iType: "None", // 当前绘制的军标类型
      plot_geometries: [], // 临时生成对象[polygon,linestring,...] 临时绘制图形使用！？
      currPlot: {
        // 当前绘制军标的数据{id，svgname，center（cp），ctrlPointLS, color...} // 子组件为其提供信息--plotVector->parseSVG
        id: null,
        name: "", // 记录军标对应的svg文件
        cp: null, // ctrlPoint：中心点是cp[0],后边是控制点
        scale: null,
        rotate: null,
        color: "", // 绘制军标的颜色（六种）；类型确定？
        boxWH: null, // SVG文件屏幕坐标宽高
        unit: null,
        attach: null, // 附加字体数组
        style: null,
      },
      alterPlot: null, // 要修改的军标数据，和currPlot结构一致
      svgCtrlPnts: [],
      xData: [], // 记录每个所绘军标元素的基本信息，currPlot数据格式
      plotRecord: {}, // 标绘动作记录--关联改对象；Object.keys(p l o t Record).length
      recordLen: 3, // 标绘动作记录数组长度
      stepCount: 0, // 全量更新技术
      fullUpdateStep: 10, // 全量更新步长，保存多少次全量更新一次
      plotDataTime: null, // 数据时间--载入数据；首次加载需要全部数据，记录载入数据时间；
      plotFileID: null, // 当前标会的文件ID
      timerID: null, // 协同定时更新ID
      loopTime: 10000, // 循环时间
      bSyncPlot: true, // 协同标志
    };
  },
  created () {
    proxy = getCurrentInstance().proxy;
  },
  methods: {
    iTypeWatch() {
      if (
        proxy.iType === "plottModify" ||
        proxy.iType === "plottMove" ||
        proxy.iType === "plottDel"
      ) {
      } else {
        if (proxy.iType) {
          proxy.iMap.removeInteraction(proxy.iDraw);
          proxy.addInteraction();
        } else {
          proxy.iMap.removeInteraction(proxy.iDraw);
        }
      }
    },
    // 休眠方法-sleep-暂时放到的plotPanel.js中（后续根据需要调整）
    // 根据给定的军标数据获取中心位置
    getPlotCenter(plotData) {
      let iType = plotData.name.substr(0, 4);
      iType = iType.toLowerCase();
      const cPnts = plotData.cp;
      const cpNum = cPnts.length;
      // let distance = 0
      let quotient = 0;
      let iMod = 0;
      //
      let bbox = null; // 临时点坐标
      let cpx;
      let cpy;
      // mult处理所需
      // let iFeatures
      // let plotPart = []
      let cpLast; // 最后一个控制点
      let cpLast2; // 倒数第二个控制点

      // console.log(iType, cpNum)
      switch (iType) {
        case "line": // LineString
          // 如果按照半程算中点，应该先计算全程，然后用折半发计算中点；这里简化按控制点来设置
          // distance = plot.wholeDistance(cPnts) / 2
          if (cpNum > 2) {
            quotient = Math.floor(cpNum / 2);
            iMod = cpNum % 2;
            // 如果有余数，商+1是结果。数组从0开始，所有还要-1；最终即为商
            // console.log(quotient, iMod)
            if (iMod) {
              return cPnts[quotient];
            } else {
              return cPnts[quotient - 1];
            }
          } else if (cpNum === 2) {
            cpx = (cPnts[1][0] - cPnts[0][0]) / 2 + cPnts[0][0];
            cpy = (cPnts[1][1] - cPnts[0][1]) / 2 + cPnts[0][1];
            return [cpx, cpy];
          }
          break;
        case "circ": // circle
          return plotData.cp[0];
        // break
        case "poly": // Polygon (Square)
          // 获取bbox，父组件中的方法，后续整理成通用方法
          bbox = proxy.$parent.getMinMax(plotData.cp);
          cpx = (bbox[2] - bbox[0]) / 2 + bbox[0];
          cpy = (bbox[3] - bbox[1]) / 2 + bbox[1];
          return [cpx, cpy];
        // break
        case "icon": // icon固定SVG图标
          return plotData.cp[0];
        // break
        case "dire": // direct
        case "ddir": // directd
          if (cpNum >= 2) {
            cpx = (cPnts[1][0] - cPnts[0][0]) / 2 + cPnts[0][0];
            cpy = (cPnts[1][1] - cPnts[0][1]) / 2 + cPnts[0][1];
            // console.log(cpx, cpy)
            return [cpx, cpy];
          }
          return [0, 0];
        // break
        case "mult":
          if (cpNum > 2) {
            cpLast = cPnts[cpNum - 1];
            cpLast2 = cPnts[cpNum - 2];
            cpx = (cpLast[0] - cpLast2[0]) / 2 + cpLast2[0];
            cpy = (cpLast[1] - cpLast2[1]) / 2 + cpLast2[1];
            return [cpx, cpy];
          } else if (cpNum === 2) {
            cpx = (cPnts[1][0] - cPnts[0][0]) / 2 + cPnts[0][0];
            cpy = (cPnts[1][1] - cPnts[0][1]) / 2 + cPnts[0][1];
            return [cpx, cpy];
          }
          break;
      }
    },
    // 添加文本到指定军标数据
    addText2xData(plotID, txtID) {
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          const att = proxy.xData[i].attach;
          if (att) {
            // 军标数据中已存在attach，直接添加
            proxy.xData[i].attach.push(txtID);
          } else {
            proxy.xData[i].attach = [txtID];
          }
          break;
        }
      }
    },
    // 根据指定的军标ID，从xData中删除军标
    delPlotFromxDataByID(plotID) {
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          proxy.xData.splice(i, 1); // 删除xData中对应的军标数据
          break; // 退出循环-已经删除不需再处理
        }
      }
    },
    // 删除军标
    delPlot(plotID = null, isSave = true) {
      let delArr = []; // 删除列表
      if (!plotID) {
        // let plotID = document.getElementById('plotid').value
        plotID = document.getElementById("plotid").value;
      }
      // 军标id处理 alt开头要去掉
      if (plotID.substr(0, 4) === "alt_") {
        plotID = plotID.substr(4);
        // console.log(plotID)
      }
      // 如果删除附加文字，需要同步删除父军标的attach中的txtID --先获取pid
      delArr.push(plotID); // 要删除的军标ID
      let pid = null;
      if (plotID.substr(0, 4) === "text") {
        // text_rect_1589772102769_0
        const xPart = plotID.split("_");
        if (isNaN(xPart[1])) {
          // 如果第二个元素不是数子 [text,*rect,1589772102769,0] 说明是附加文本
          // console.log(xPart)
          pid = xPart[1] + "_" + xPart[2];
          // 删除文字关联军标中，attach中的记录
          proxy.delAttachByID(pid, plotID); // 参数：包含文本的父军标iD， 往前军标ID（军标文本）
        }
        // 删除指定的军标
        proxy.clearPlotByGID(plotID);
        proxy.clearCtrlPoint();
        proxy.getPlotDataByID(null, null); // 清空控制箱
        // 删除军标xData中当前选择军标
        proxy.delPlotFromxDataByID(plotID); // 删除xData中指定的军标数据
        // 如果删除的是非文字军标
      } else {
        // if (plotID) {
        proxy.clearPlotByGID(plotID);
        proxy.clearCtrlPoint();
        proxy.getPlotDataByID(null, null); // 清空控制箱

        // 获取军标的关联文字数组
        const attachText = proxy.getPlotAttach(plotID); // [text_rect_1589772102769_0, text_rect_1589772102769_1]
        // console.log(attachText)
        // 删除军标xData中当前选择军标
        proxy.delPlotFromxDataByID(plotID); // 删除xData中指定的军标数据
        // 查看军标是否有关联的文本，有则依次删除。
        // if (!attachText) return
        // if (attachText.length === 0) return
        // 有则依次删除军标附加文本
        if (attachText && attachText.length > 0) {
          delArr = delArr.concat(attachText);
          for (let i = 0; i < attachText.length; i++) {
            // proxy.delPlot(attachText[i]) 不能使用递归，会转到text删除方式！
            proxy.clearPlotByGID(attachText[i]);
            proxy.clearCtrlPoint();
            proxy.getPlotDataByID(null, null);
            // 删除军标xData中当前选择军标
            proxy.delPlotFromxDataByID(attachText[i]); // 删除关联的文字内容
          }
        }
      }
      // 协同-322
      if (isSave && delArr.length > 0) {
        for (let i = 0; i < delArr.length; i++) {
          proxy.plotRecordUpdate(delArr[i], "D");
        }
        // console.log(delArr)
      }
      // 发送事件，告知军标删除
      proxy.$parent.emitFun("plotupdata", { act: "del", data: plotID });
    },
    // 创建文字点
    // 参数：basePnt-文本位置点（质点），txtID-文本ID， txt-文本内容，fontStyle-字体
    createTxtPnt(
      basePnt,
      txtID,
      txt = "请添加文字",
      fontStyle = "normal 12px 微软雅黑"
    ) {
      if (!basePnt) return; // 没有中心点不做处理！
      const iGeom = new Point(basePnt);
      const iFeature = new Feature(iGeom);
      iFeature.set("gid", txtID);
      iFeature.set("type", "PLOT");
      // 文字特殊字符处理-回复\n(在保存那里统一处理)
      // let iText = txt.replace(/\\\\n/g, '\n')
      // 创建样式
      const newStyle = new Style({
        text: new Text({
          // 位置
          textAlign: "left", // 'left', 'right', 'center', 'end' or 'start'.
          // 基准线
          textBaseline: "middle", // 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
          // 文字样式
          font: fontStyle, // 默认格式 'normal 14px 微软雅黑',
          // font: 'normal' + x + 'px 微软雅黑',
          // 文本内容
          text: txt,
          // 文本填充样式（即文字颜色）
          fill: new Fill({ color: "#000000" }),
          // stroke: new Stroke({ color: '#FFFFFF', width: 1 })
        }),
      });
      // 属性添加到Featrue
      iFeature.setStyle(newStyle);
      // 将绘制的军标加入军标层
      proxy.plottingLayer.getSource().addFeature(iFeature);
      // 获取文字第二控制点
      const xFont = fontStyle.split(" "); // 文字样式数组，元素2为文字大小
      const cp2WH = proxy.getTxtCPntAndWH(basePnt, xFont[1], txt);
      // 记录currplot信息到xData，参数：ID军标id，plotName所绘军标名称，cp控制点（或军标点），scale缩放因子 ，rotate：旋转角度，color颜色，unit单位长度，style样式
      proxy.setCurrPlot(
        txtID,
        "Point",
        cp2WH.cp,
        1,
        0,
        proxy.currColor,
        null,
        null
      );
      proxy.currPlot.boxWH = cp2WH.boxWH;
      // 文字特殊字符处理-回复\n(在保存那里统一处理)
      // iText = txt.replace(/\n/g, '\\\\n')
      // 参数Fill填充色或文字颜色； Stroke边色； Width边框； LineDash虚线样式； TEXT文本内容； Font字体样式
      proxy.setCurrPlotStyle("#000000", null, 0, null, txt, fontStyle);
      // proxy.currPlotAddUserTime() // 添加用户和时间戳(此处不添加也可？待定)
      proxy.xData.push(JSON.parse(JSON.stringify(proxy.currPlot)));
      // 当前所选对象应该为新建文本
    },
    /* addText添加文本
     * 根据gid获取xData对应的军标类型；添加关联的文本（相互关联）
     */
    addText() {
      let plotID = document.getElementById("plotid").value;
      if (plotID) {
        // 如果选择的是调整点，id需要去掉前面的alt前缀
        if (plotID.substr(0, 4) === "alt_") {
          plotID = plotID.substr(4);
          console.log(plotID);
        } else if (plotID.substr(0, 4) === "text") {
          console.log("文本节点不允许添加文字!");
          return;
        }
        // 获取当前军标数据
        const plotData = proxy.getPlotFromXData(plotID);
        if (!plotData) return; // 获取不到有效军标数据退出
        // 查看当前军标是否有关联文字；从关联文字记录的数组中获取（attach=[关联的文字id，text_icon_12312312_0]）
        const att = plotData.attach;
        let txtNum = 0;
        if (att) {
          // 如果有附加文字，获取新计数值
          if (att.length > 0) {
            const post = att[att.length - 1].lastIndexOf("_");
            console.log(att[att.length - 1].substr(post + 1));
            txtNum = parseInt(att[att.length - 1].substr(post + 1)); // 加1去掉下划线自身
            txtNum++; // 获取计数值后+1
          }
        }
        console.log(txtNum);
        // let textID = 'text_' + plotID // 生成新建文字(不能保证多个文本gid唯一)
        // let textID = 'text_' + String(new Date().getTime())
        const textID = "text_" + plotID + "_" + txtNum;
        proxy.addText2xData(plotID, textID);

        // let iType = plotData.name.substr(0, 4).toLowerCase()
        // console.log(iType, textID, plotData)
        // // 文字中心点（质心）获取
        // console.log(iType)
        let txtCoord = null; // 文字坐标位置
        // 获取文字生成位置
        txtCoord = proxy.getPlotCenter(plotData);
        // 生成新的文字
        proxy.createTxtPnt(txtCoord, textID);
        proxy.currPlotAddUserTime(); // 添加用户和时间戳(从createTxtPnt中移到此)
      }
    },

    /* Method: saveData 转移到plotSaveLoad.js中了；
     * async loadData (plotData) 加载绘制军标 转移到plotSaveLoad.js中了
     */

    /* Method: setPlotType
     * 设置军标类型
     * 参数 pType：军标类型或军标ID
     * 返回：
     */
    setPlotType(pType) {
      proxy.iType = pType;
      proxy.iTypeWatch();
    },

    /* Method: setPlotColor
     * 设置军标颜色
     * 参数 iColor：军标颜色
     * 返回：
     */
    setPlotColor(iColor) {
      proxy.currColor = iColor;
      // console.log(proxy.currColor)
    },

    /**
     * @description 选择绘制的（军标），读入军标数据；调用plotVector的get-PlotDataEx方法（新）
     * @param sPlotID {String}军标ID（名称）  async
     * @return 无
     */
    async getPlotData(plotID) {
      console.log("getPlotData", plotID);
      // 筛选
      if (plotID.length < 4) return;
      // 开始标绘-清除环境
      // proxy.beginPlotting(plotID)
      const plotSvg = null;

      const iType = plotID.substr(0, 4);
      console.log(iType);
      switch (iType) {
        case "icon":
          PlotSaveLoad.methods.getSVGDataByID(plotID, proxy.iPlotSvgArr);
          // 改为调用方法getSVGDataByID--在plotSaveLoad中
          // proxy.$refs.pVec.clearPlotData() // 清空原有军标SVG数据-- 会有错（svgData会null）
          // proxy.$refs.pVec.getPlotData(plotID)
          // proxy.$refs.pVec.svgData = await proxy.$refs.pVec.getPlotDataEx(plotID)
          // await proxy.sleep(100)
          break;
        case "dire":
        case "ddir":
          // plotSvg = proxy.iPlotSvgArr[plotID]
          // if (plotSvg) {
          //   console.log('命中军标svg')
          //   proxy.$refs.pVec.svgData = plotSvg
          // } else {
          //   proxy.$refs.pVec.svgData = await proxy.$refs.pVec.getPlotDataEx(plotID)
          //   await proxy.sleep(100)
          //   // 保存到军标数组中
          //   proxy.iPlotSvgArr[plotID] = proxy.$refs.pVec.svgData
          // }
          PlotSaveLoad.methods.getSVGDataByID(plotID, proxy.iPlotSvgArr);
          // --proxy.$refs.pVec.clearPlotData() // 清空原有军标SVG数据 -- 会有错（svgData会null）
          // --proxy.$refs.pVec.getPlotData(plotID)
          // proxy.$refs.pVec.svgData = await proxy.$refs.pVec.getPlotDataEx(plotID)
          // --await proxy.sleep(100)
          break;
        case "mult":
          // console.log('multidirection--hand drawn')
          break;
        default:
      }
    },

    /* Method: setCurrPlot设置当前绘制军标数据信息--保存数据使用
     * 设置当前绘制军标数据信息--保存数据使用
     * 参数：ID军标id，plotName所绘军标名称，cp控制点（或军标点），scale缩放因子 ，rotate：旋转角度，color颜色，unit单位长度，style样式
     */
    setCurrPlot(
      ID,
      plotName = proxy.iType,
      ctrlPoint = null,
      SCALE = 1,
      ROTATE = 0,
      COLOR = proxy.currColor,
      UNIT = null,
      STYLE = null
    ) {
      proxy.currPlot.id = ID; // id军标id
      proxy.currPlot.name = plotName; // 所绘军标名称或类型
      proxy.currPlot.cp = ctrlPoint; // cp控制点
      proxy.currPlot.scale = SCALE;
      proxy.currPlot.rotate = ROTATE;
      proxy.currPlot.color = COLOR;
      proxy.currPlot.boxWH = null; // 新添加的军标宽高 屏幕坐标-像素,如：{w:60,h:12}
      proxy.currPlot.attach = null; // 关联文字（附加文字用）
      proxy.currPlot.unit = UNIT; // unit单位长度
      proxy.currPlot.style = STYLE; // style样式
    },
    // 设置样式;参数 Fill填充色或文字颜色； Stroke边色； Width边框； LineDash虚线样式； TEXT文本内容； Font字体样式，如： ‘normal 12px 微软雅黑’
    setCurrPlotStyle(
      Fill = "none",
      Stroke = null,
      Width = 0,
      LineDash = null,
      TEXT = null,
      Font = null
    ) {
      let iStyle = null;
      // 有虚线设置
      if (LineDash) {
        // 有文字，有虚线--（一般不会出现）
        if (TEXT) {
          iStyle = {
            fill: Fill,
            stroke: Stroke,
            width: Width,
            lineDash: LineDash,
            text: TEXT,
            font: Font,
          };
        } else {
          // 无文字，有虚线； --（绘制虚线）
          iStyle = {
            fill: Fill,
            stroke: Stroke,
            width: Width,
            lineDash: LineDash,
          };
        }
      } else {
        // 无虚线设置
        // 有文字，无虚线--（书写文字）
        if (TEXT) {
          iStyle = {
            fill: Fill,
            stroke: Stroke,
            width: Width,
            text: TEXT,
            font: Font,
          };
        } else {
          // 无文字，无虚线--（普通形状）
          iStyle = {
            fill: Fill,
            stroke: Stroke,
            width: Width,
          };
        }
      }
      // 写入样式
      proxy.currPlot.style = JSON.parse(JSON.stringify(iStyle));
      // console.log(proxy.currPlot.style)
    },
    // 单独设置样式（通过名称--属性必须存在！）
    setCurrPlotStyleByName(name, value) {
      if (proxy.currPlot.hasOwnProperty(name)) {
        proxy.currPlot[name] = value;
      }
    },

    // 根据指定的军标id，更新当前军标数据中的样式
    setxDataPlotStyle(
      plotID,
      Fill = null,
      Stroke = null,
      Width = 0,
      LineDash = null,
      TEXT = null,
      Font = null
    ) {
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          if (Fill) {
            proxy.xData[i].style.fill = Fill;
          }
          if (Stroke) {
            proxy.xData[i].style.stroke = Stroke;
          }
          if (Width) {
            proxy.xData[i].style.width = Width;
          }
          if (LineDash) {
            proxy.xData[i].style.lineDash = LineDash;
          }
          if (TEXT) {
            proxy.xData[i].style.text = TEXT;
          }
          if (Font) {
            proxy.xData[i].style.font = Font;
          }
          break;
        }
      }
    },
    // 删除属性！
    // 样式用户可以修改，添加文字或修改线形--修改时要改xData对应的style样式信息！-- 待扩展
    // 更新xData中的军标数据，更新样式内容；完成后写入xData替换就数据! ***
    updatePlot(gID, iPlotData) {
      if (proxy.xData.length === 0) return;
      let idx = null; // 记录要修改的对象索引位置
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i],gID)
        if (proxy.xData[i].id === gID) {
          // console.log(proxy.xData[i],gID)
          idx = i;
          break;
        }
      }
      // console.log(iPlotData)
      if (iPlotData) {
        proxy.xData.splice(idx, 1, iPlotData);
      }
    },

    // 删除控制点
    clearCtrlPoint() {
      if (!proxy.plottingLayer) return;
      const xSource = proxy.plottingLayer.getSource();
      xSource.getFeatures().forEach(function (feature) {
        // console.log(feature)
        const xID = feature.get("gid").substr(0, 3);
        // console.log(xID)
        if (xID === "alt") {
          xSource.removeFeature(feature);
          // proxy.plottingLayer.getSource().removeFeature(feature)
        }
        // if(feature.getProperties().featureInfo.deviceCode=="abc"){ proxy.featureLayer.getSource().removeFeature(feature); } })
      });
      // 计数器归零
      proxy.altNum = 0;
    },

    // 在标绘层修改军标控制点后，获取变更的军标控制点alt_
    getCtrlPoint() {
      const xSource = proxy.plottingLayer.getSource();
      const ctrPointArr = [];
      // proxy.altNum 全局 修改点数量
      for (let i = 0; i < proxy.altNum; i++) {
        const altFeature = xSource.getFeatureById(i);
        const geometry = altFeature.getGeometry();
        const iType = geometry.getType().toLowerCase();
        if (iType === "point") {
          ctrPointArr.push(geometry.getCoordinates());
        }
      }
      return ctrPointArr;
    },
    // translate all CtrlPoint 根据指定的 偏移量，移动所有的控制点！
    // 参数：deltaX, deltaY 偏移量
    // 返回：返回所有控制点坐标，和getCtrlPoint相同；
    tranAllCtrlPoint(deltaX, deltaY) {
      const xSource = proxy.plottingLayer.getSource();
      const ctrPointArr = [];
      for (let i = 0; i < proxy.altNum; i++) {
        const altFeature = xSource.getFeatureById(i);
        const altID = altFeature.get("gid").substr(0, 4); // 获取id的前四位 alt_
        const geometry = altFeature.getGeometry();
        const iType = geometry.getType().toLowerCase();
        if (iType === "point" && altID === "alt_") {
          geometry.translate(deltaX, deltaY);
          ctrPointArr.push(geometry.getCoordinates());
        }
      }
      return ctrPointArr;
    },

    // 移动军标时（不是移动军标节点），附加文字跟随移动
    tranAttachTxt(txtArray, deltaX, deltaY) {
      if (!txtArray) return;
      if (txtArray.length < 0) return;
      // let xSource = proxy.plottingLayer.getSource()
      for (let i = 0; i < txtArray.length; i++) {
        // 每个文字有两个控制点，需要先添加
        proxy.addCtrlPoint(txtArray[i]);
        // 移动所有文字控制点
        const txtCtrlPnts = proxy.tranAllCtrlPoint(deltaX, deltaY);
        // 删除军标图层中的对应军标
        proxy.clearPlotByGID(txtArray[i]);
        // 删除军标层中的控制点--不能删除（鼠标移动后已经更新到新位置）
        // proxy.$refs.iPlotting.clearCtrlPoint()
        // 更新xData中的数据（cp控制点信息）
        proxy.updateCtrlPoint(txtArray[i], txtCtrlPnts);
        // 生成新的军标文字
        proxy.createTxtPlot(proxy.xData2currPlotByID(txtArray[i]));
        // 删除军标层中的控制点--不能删除（鼠标移动后已经更新到新位置）
        proxy.clearCtrlPoint();
      }
    },

    // 更新控制点，将新的控制点写入指定军标数据中
    // 参数：gID 组ID，ctrPointLs：新的控制点列表
    updateCtrlPoint(gID, ctrlPointLs) {
      // console.log(gID, ctrlPointLs)
      if (proxy.xData.length === 0) return;
      proxy.alterPlot = null; // 清空数据！（保存要修改的军标数据）
      let idx = -1; // 记录要修改的对象索引位置
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i],gID)
        if (proxy.xData[i].id === gID) {
          // console.log(proxy.xData[i],gID)
          proxy.alterPlot = proxy.xData[i];
          idx = i;
          break;
        }
      }
      if (proxy.alterPlot) {
        // proxy.alterPlot.cp = ctrlPointLs
        proxy.alterPlot.cp = JSON.parse(JSON.stringify(ctrlPointLs));
        // 协同--确保xdata的id与原来一致322
        proxy.alterPlot.id = gID;
        proxy.xData.splice(idx, 1, proxy.alterPlot);
        proxy.updateTimestamp(idx); // 协同修改时间戳
      }
    },
    updateCtrlPointSVG2(gID, ctrlPointLs) {
      // console.log(gID, ctrlPointLs)
      if (proxy.xData.length === 0) return;
      proxy.alterPlot = null; // 清空数据！（保存要修改的军标数据）
      let idx = -1; // 记录要修改的对象索引位置
      let PntLs = null;
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i],gID)
        if (proxy.xData[i].id === gID) {
          // console.log(proxy.xData[i],gID)
          proxy.alterPlot = proxy.xData[i];
          idx = i;
          PntLs = JSON.parse(JSON.stringify(proxy.xData[i].cp));
          break;
        }
      }
      if (proxy.alterPlot) {
        const cPnts = PntLs.map((d) => {
          // 转换成屏幕坐标
          const c = proxy.iMap.getPixelFromCoordinate(d);
          return [c[0], c[1]];
        });
        const ctrlPnts = ctrlPointLs.map((d) => {
          // 转换成屏幕坐标
          const c = proxy.iMap.getPixelFromCoordinate(d);
          return [c[0], c[1]];
        });
        // console.log(cPnts,ctrlPnts)
        const len01 = Math.sqrt(
          (cPnts[0][0] - cPnts[1][0]) * (cPnts[0][0] - cPnts[1][0]) +
            (cPnts[0][1] - cPnts[1][1]) * (cPnts[0][1] - cPnts[1][1])
        );
        const len02 = Math.sqrt(
          (ctrlPnts[0][0] - ctrlPnts[1][0]) *
            (ctrlPnts[0][0] - ctrlPnts[1][0]) +
            (ctrlPnts[0][1] - ctrlPnts[1][1]) *
              (ctrlPnts[0][1] - ctrlPnts[1][1])
        );
        console.log(len01, len02);
        const iScale = len02 / len01;
        // console.log('=============================================================')
        // console.log(iScale, proxy.alterPlot.scale)
        // if (proxy.alterPlot.scale < 0.3) proxy.alterPlot.scale = 0.3  // 太小的时候不好调整，尺寸有误。因此添加此行！
        proxy.alterPlot.scale = proxy.alterPlot.scale * iScale;
        // console.log(iScale, proxy.alterPlot.scale)
        // 旋转
        const x1 = ctrlPnts[0][0]; // .x
        const y1 = ctrlPnts[0][1]; // .y
        const x2 = ctrlPnts[1][0]; // .x
        const y2 = ctrlPnts[1][1]; // .y
        proxy.alterPlot.rotate = Math.atan2(y2 - y1, x2 - x1) + Math.PI / 2;
        // proxy.alterPlot.cp = ctrlPointLs
        proxy.alterPlot.cp = JSON.parse(JSON.stringify(ctrlPointLs));
        proxy.xData.splice(idx, 1, proxy.alterPlot);
      }
    },
    updateCtrlPointSVG3(gID, ctrlPointLs) {
      // console.log(gID, ctrlPointLs)
      if (proxy.xData.length === 0) return;
      proxy.alterPlot = null; // 清空数据！（保存要修改的军标数据）
      let idx = -1; // 记录要修改的对象索引位置
      let PntLs = null;
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i], gID)
        if (proxy.xData[i].id === gID) {
          // console.log(proxy.xData[i], gID)
          proxy.alterPlot = JSON.parse(JSON.stringify(proxy.xData[i]));
          idx = i;
          PntLs = JSON.parse(JSON.stringify(proxy.xData[i].cp));
          break;
        }
      }
      if (proxy.alterPlot) {
        const cPnts = PntLs.map((d) => {
          // 转换成屏幕坐标
          const c = proxy.iMap.getPixelFromCoordinate(d);
          // console.log(c)
          return [c[0], c[1]];
        });
        const ctrlPnts = ctrlPointLs.map((d) => {
          // 转换成屏幕坐标
          const c = proxy.iMap.getPixelFromCoordinate(d);
          //  console.log(c)
          return [c[0], c[1]];
        });
        // console.log(cPnts,ctrlPnts)
        const len01 = Math.sqrt(
          (cPnts[0][0] - cPnts[1][0]) * (cPnts[0][0] - cPnts[1][0]) +
            (cPnts[0][1] - cPnts[1][1]) * (cPnts[0][1] - cPnts[1][1])
        );
        const len02 = Math.sqrt(
          (ctrlPnts[0][0] - ctrlPnts[1][0]) *
            (ctrlPnts[0][0] - ctrlPnts[1][0]) +
            (ctrlPnts[0][1] - ctrlPnts[1][1]) *
              (ctrlPnts[0][1] - ctrlPnts[1][1])
        );
        // console.log(len01, len02)
        const iScale = len02 / len01;
        // console.log(iScale, proxy.alterPlot.scale)
        // if (proxy.alterPlot.scale < 0.3) proxy.alterPlot.scale = 0.3  // 太小的时候不好调整，尺寸有误。因此添加此行！
        // -proxy.alterPlot.scale = proxy.alterPlot.scale * iScale
        // let txtScale = proxy.alterPlot.txtScale
        // if (txtScale) {
        //   proxy.alterPlot.txtScale = proxy.alterPlot.txtScale * iScale
        //   proxy.alterPlot.txtScale = txtScale
        // } else {
        //   proxy.alterPlot.txtScale = proxy.alterPlot.scale * iScale
        //   proxy.alterPlot.txtScale = txtScale
        // }
        // 应该只执行一次
        const currScale = proxy.$refs.pVec.getPlotScale(proxy.alterPlot.cp);
        if (currScale < proxy.alterPlot.scale) {
          proxy.alterPlot.scale = currScale;
        }
        proxy.alterPlot.scale = iScale * proxy.alterPlot.scale;
        // console.log("=================================================")
        // console.log(iScale, currScale, proxy.alterPlot.scale)
        // 旋转
        const x1 = ctrlPnts[0][0]; // .x
        const y1 = ctrlPnts[0][1]; // .y
        const x2 = ctrlPnts[1][0]; // .x
        const y2 = ctrlPnts[1][1]; // .y
        proxy.alterPlot.rotate = Math.atan2(y2 - y1, x2 - x1) + Math.PI / 2;
        // proxy.alterPlot.cp = ctrlPointLs
        proxy.alterPlot.cp = JSON.parse(JSON.stringify(ctrlPointLs));
        proxy.xData.splice(idx, 1, proxy.alterPlot);
        // console.log(proxy.xData[idx])
      }
    },
    updateCtrlPointSVG(gID, ctrlPointLs) {
      if (ctrlPointLs.length === 0) {
        console.log(
          "********************************************************** Err!"
        );
        return;
      }
      // console.log(gID, ctrlPointLs)
      if (proxy.xData.length === 0) return;
      proxy.alterPlot = null; // 清空数据！（保存要修改的军标数据）
      let idx = -1; // 记录要修改的对象索引位置
      let plotName = null;
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i],gID)
        if (proxy.xData[i].id === gID) {
          // console.log(proxy.xData[i],gID)
          proxy.alterPlot = proxy.xData[i];
          plotName = proxy.xData[i].name;
          idx = i;
          break;
        }
      }
      // 质点确认(有重复，需要整理？)
      // xPart数组，保存plotName的组成分片icon_br_dun等
      const chkArr = ["CP", "TL", "TM", "TR", "LM", "RM", "BL", "BM", "BR"]; // 校验数据
      let basePnt = "CP";
      const xPart = plotName.split("_");
      // console.log(xPart)
      if (xPart.length > 1) {
        basePnt = xPart[1].toUpperCase();
        // basePoint校验
        if (chkArr.indexOf(basePnt) === -1) {
          basePnt = "CP";
        }
      } else {
        basePnt = "CP";
      }

      const ctrlPnts = ctrlPointLs.map((d) => {
        // 转换成屏幕坐标
        const c = proxy.iMap.getPixelFromCoordinate(d);
        return [c[0], c[1]];
      });
      // console.log(basePnt)
      // console.log(ctrlPnts, ctrlPointLs)
      // 通过控制点坐标数组(地理坐标)，获取放大因子
      const iScale = proxy.$refs.pVec.getRealScale(ctrlPointLs, basePnt);
      // console.log(iScale)
      proxy.alterPlot.scale = iScale;
      // console.log("=================================================")
      // console.log(iScale, proxy.alterPlot.scale)
      // 旋转
      const x1 = ctrlPnts[0][0]; // .x
      const y1 = ctrlPnts[0][1]; // .y
      const x2 = ctrlPnts[1][0]; // .x
      const y2 = ctrlPnts[1][1]; // .y
      proxy.alterPlot.rotate = Math.atan2(y2 - y1, x2 - x1) + Math.PI / 2;
      // proxy.alterPlot.cp = ctrlPointLs
      proxy.alterPlot.cp = JSON.parse(JSON.stringify(ctrlPointLs));
      // 协同--确保xdata的id与原来一致322
      proxy.alterPlot.id = gID;
      proxy.xData.splice(idx, 1, proxy.alterPlot);
      // console.log(proxy.xData[idx])
      proxy.updateTimestamp(idx); // 协同修改时间戳
    },
    /* Method:addCtrlPoint
     * 添加修改军标用的控制点（样式白底黑边）
     * 参数：gID 军标组ID
     */
    addCtrlPoint(gID) {
      // proxy.clearCtrlPoint()
      // console.log(proxy.xData.length)
      if (proxy.xData.length === 0) return;
      proxy.alterPlot = null; // 清空数据！
      // let iPlot = null
      // proxy.xData.forEach((val)=>{
      //   if (val.id === gID) {
      //     iPlot = val
      //   }
      // })
      // console.log(proxy.xData, gID)
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i],gID)
        if (proxy.xData[i].id === gID) {
          // console.log(proxy.xData[i], gID)
          proxy.alterPlot = proxy.xData[i];
          break;
        }
      }
      if (!proxy.alterPlot) return null;
      // console.log(proxy.alterPlot.name)
      const iType = proxy.alterPlot.name.toLowerCase();
      // let shortName = iType.substr(0, 4)
      // if (shortName === 'icon' || shortName === 'dire' || shortName === 'mult' || shortName === 'hand') {
      //   iType = shortName
      // }
      // 将军标每个控制点添加到军标图层
      // if (iType === 'icon' || iType === 'dire' || iType === 'mult' || iType === 'hand') {
      //   for (let i = 0; i < proxy.alterPlot.cp.length; i++) {
      //     //console.log('alt_' + gID, proxy.alterPlot.cp[i])
      //     // console.log(proxy.alterPlot.cp[i])
      //     proxy.addPoint('alt_' + gID, proxy.alterPlot.cp[i])
      //   }
      // }
      // if (iType === 'polygon') {
      //   // 获取多边形的定点画控制点
      //   for (let i = 0; i < proxy.alterPlot.cp.length; i++) {
      //     //console.log('alt_' + gID, proxy.alterPlot.cp[i])
      //     // console.log(proxy.alterPlot.cp[i])
      //     proxy.addPoint4Poly('alt_' + gID, proxy.alterPlot.cp[i])
      //   }
      // }
      // if (iType === 'circle') {
      //   // 获取圆的顶点和半径画控制点
      //   proxy.addPoint4Circle('alt_' + gID, proxy.alterPlot.cp)
      // }
      // console.log(iType)
      // console.log(proxy.alterPlot)
      switch (iType) {
        case "polygon":
          for (let i = 0; i < proxy.alterPlot.cp.length; i++) {
            // 处理多边形控制点
            proxy.addPoint4Poly("alt_" + gID, proxy.alterPlot.cp[i]);
          }
          break;
        case "circle":
          // 获取圆的顶点和半径画控制点
          proxy.addPoint4Circle("alt_" + gID, proxy.alterPlot.cp);
          break;
        // case 'point':
        //   proxy.addPoint('alt_' + gID, proxy.alterPlot.cp)
        //   break
        default:
          for (let i = 0; i < proxy.alterPlot.cp.length; i++) {
            // 处理控制点方式iType === 'icon' || iType === 'dire' || iType === 'mult' || iType === 'hand'
            proxy.addPoint("alt_" + gID, proxy.alterPlot.cp[i]);
          }
      }
    },

    /* Method:addPoint
     * 添加控制点到 军标绘制层
     * 参数：pnt：要添加的点坐标
     */
    addPoint(altID, pnt) {
      const iPoint = new Point(pnt);
      const iFeature = new Feature(iPoint);
      iFeature.set("gid", altID);
      iFeature.set("type", "PLOT");
      iFeature.setId(proxy.altNum++);
      // 设置样式
      iFeature.setStyle(
        new Style({
          image: new CircleStyle({
            radius: 5,
            fill: new Fill({
              color: "#ffcc33",
            }),
            stroke: new Stroke({
              color: "#ffffff", // '#0099FF',
              width: 2,
            }),
          }),
        })
      );
      // 将绘制的军标控制点加入军标层
      proxy.plottingLayer.getSource().addFeature(iFeature);
    },
    // 绘制多边形控制点
    addPoint4Poly(altID, pnt) {
      // console.log(pnt)
      const pntList = pnt;
      // for (let i = 0; i < pntList.length - 1; i++) { // 减1是为了去掉封口点！
      for (let i = 0; i < pntList.length - 1; i++) {
        // 减1是为了去掉封口点！
        // console.log('alt_' + gID, proxy.alterPlot.cp[i])
        // console.log(proxy.alterPlot.cp[i])
        proxy.addPoint(altID, pntList[i]);
      }
    },
    // 绘制圆形控制点
    addPoint4Circle_old(altID, pnt) {
      // console.log(pnt)
      const cp1 = pnt[0];
      const r = pnt[1][0];
      const cp2 = [cp1[0] + r, cp1[1]];
      // 生成控制点
      const pntList = [cp1, cp2];
      // console.log(pntList)
      for (let i = 0; i < pntList.length; i++) {
        proxy.addPoint(altID, pntList[i]);
      }
    },
    // 控制点不用再计算
    addPoint4Circle(altID, pnt) {
      if (pnt.length < 2) return;
      // console.log(pnt)
      // 生成控���点
      // let pntList = [cp1, cp2]
      // console.log(pntList)
      for (let i = 0; i < pnt.length; i++) {
        proxy.addPoint(altID, pnt[i]);
      }
    },

    // 移动军标;移动指定的军标x，y距离
    movePlogByID(plotID, deltaX, deltaY) {
      // console.log(plotID, deltaX, deltaY)
      const features = proxy.plottingLayer.getSource().getFeatures();
      // 筛选
      const partList = features.filter((value, key, arr) => {
        if (value.get("gid") === plotID) {
          return value;
        }
        // return value.id === plotID;
      });
      // 筛选简写
      // let partList = proxy.plottingLayer.filter(value => value.id == plotID)
      // console.log(partList)
      const numPart = partList.length;
      for (let i = 0; i < numPart; i++) {
        const geom = partList[i].getGeometry();
        // console.log(typeof geom)
        geom.translate(deltaX, deltaY);
      }
      // 注意，还要修改xData中的控制点修改
    },

    // xData中的控制点修改【不再使用；用下面方法替换】
    movePlotCPByID(plotID, deltaX, deltaY) {
      const num = proxy.xData.length;
      const ctrPointArr = []; // 保存移动后的控制点
      if (num < 1) return;
      for (let i = 0; i < num; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          proxy.alterPlot = proxy.xData[i]; // 获取军标的控制点信息
          break;
        }
      }
      // 找到控制点后，将每个控制点创建成点对象，平移，坐标反馈个原有控制点
      if (proxy.alterPlot) {
        for (let i = 0; i < proxy.alterPlot.length; i++) {
          // 创建控制点，平移放回坐标？
          const cp = new Point(proxy.alterPlot[i]);
          cp.translate(deltaX, deltaY);
          proxy.alterPlot[i] = cp.getCoordinates();
        }
      }
      // 返回平移后的控制点
      return ctrPointArr;
    },
    movePlotCtrlPnts(plotID, deltaX, deltaY) {
      // let ctrPointArr = []
      proxy.svgCtrlPnts.splice(0, proxy.svgCtrlPnts.length);
      const xSource = proxy.plottingLayer.getSource();
      // if (proxy.altNum) return  // 默认为0
      // console.log(proxy.altNum)
      for (let i = 0; i < proxy.altNum; i++) {
        const altFeature = xSource.getFeatureById(i);
        const geometry = altFeature.getGeometry();
        // console.log(geometry.getCoordinates())
        // console.log(deltaX, deltaY)
        geometry.translate(deltaX, deltaY);
        // console.log(geometry.getCoordinates().length)
        // ctrPointArr.push(geometry.getCoordinates())
        // proxy.svgCtrlPnts.push(JSON.parse(JSON.stringify(geometry.getCoordinates())))
        proxy.svgCtrlPnts.push(geometry.getCoordinates());
        // console.log(proxy.svgCtrlPnts)
      }
      // return ctrPointArr
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          // proxy.xData[i].cp = proxy.svgCtrlPnts  // 获取军标的控制点信息
          proxy.xData[i].cp = JSON.parse(JSON.stringify(proxy.svgCtrlPnts));
          // proxy.xData[i]['TS'] = new Date().getTime()
          proxy.updateTimestamp(i);
          break;
        }
      }
    },

    /* Method:initPlottingLayer
     * 初始化plotting层，使用标绘的第一步！
     * 参数：parentMap：ol地图实例
     * 返回：
     */
    initPlottingLayer(parentMap) {
      proxy.iMap = parentMap;

      // 默认样式设置
      proxy.defStyle = new Style({
        // ol.style.Style
        fill: new Fill({
          // ol.style.Fill
          color: "rgba(255,0,0,0.4)",
        }),
        stroke: new Stroke({
          // ol.style.Stroke
          color: "#e21e0a",
          width: proxy.strokeWidth, // 2
        }),
        image: new CircleStyle({
          // ol.style.Circle
          radius: 5,
          fill: new Fill({
            // ol.style.Fill
            color: "#ff0000",
          }),
        }),
        text: new Text({
          // font: '12px Calibri,sans-serif', // 字体与大小
          fill: new Fill({
            // 文字填充色
            color: "#ff0000",
          }),
          stroke: new Stroke({
            // 文字边界宽度与颜色
            color: "rgba(255,0,0,0)",
            width: 1,
          }),
        }),
      });
      // 当前样式设置
      proxy.iStyle = new Style({
        // ol.style.Style
        fill: new Fill({
          // ol.style.Fill
          color: "rgba(255,0,0,0.4)",
        }),
        stroke: new Stroke({
          // ol.style.Stroke
          color: "#ff0000",
          width: proxy.strokeWidth, // 2
        }),
        image: new CircleStyle({
          // ol.style.Circle
          radius: 5,
          fill: new Fill({
            // ol.style.Fill
            color: "#ff0000",
          }),
        }),
        text: new Text({
          // font: '12px Calibri,sans-serif', // 字体与大小
          fill: new Fill({
            // 文字填充色
            color: "#ff0000",
          }),
          stroke: new Stroke({
            // 文字边界宽度与颜色
            color: "rgba(255,0,0,0)",
            width: 1,
          }),
        }),
      });
      // 固有蓝色样式（不会改变的蓝色，如：人防三角，驱散标志等）
      proxy.defBlue = new Style({
        // ol.style.Style
        fill: new Fill({
          // ol.style.Fill
          color: "rgba(0,63,152,1)",
        }),
        stroke: new Stroke({
          // ol.style.Stroke
          color: "#003F98",
          width: 0,
        }),
      });
      // 将默认样式写入样式列表
      proxy.iStyleName = "defStyle";
      proxy.iStyleList[proxy.iStyleName] = proxy.defStyle;
      proxy.iStyleList.defBule = proxy.defBlue;
      // 需要一个vector的layer来放置标绘图标
      proxy.plottingLayer = new VectorLayer({
        // ol.layer.Vector
        source: new VectorSource(), // ol.source.Vector 用来保存标绘
        wrapX: false,
        style: proxy.defStyle,
      });
      proxy.plottingLayer.set("name", "plotLayer");
      // 将矢量图层添加到地图中
      proxy.iMap.addLayer(proxy.plottingLayer);
      // 调整层级关系
      proxy.plottingLayer.setZIndex(13);
      // 注册监听事件；层级发生变化时调整军标文字
      // 监听地图层级变化
      proxy.iMap.getView().on("change:resolution", () => {
        // function
        const iFeatrues = proxy.plottingLayer.getSource().getFeatures();
        let iScale = 1; // 缩放因子
        // getStyle();
        // // 重新设置图标的缩放率，基于层级10来做缩放
        // style.getImage().setScale(proxy.getZoom() / 10);
        // anchor.setStyle(style);
        for (let i = 0; i < iFeatrues.length; i++) {
          // console.log(iFeatrues[i].getGeometry().getType() === 'Point')
          if (iFeatrues[i].getGeometry().getType() === "Point") {
            // console.log(iFeatrues[i].getGeometry())
            // console.log(iFeatrues[i].get('gid'))
            const iPlotID = iFeatrues[i].get("gid");
            const iType = iPlotID.substr(0, 4).toLowerCase();
            if (iType === "alt_") return; // 临时控制点，忽略
            // 处理自建文本
            if (iType === "text") {
              const iPlot = proxy.getPlotFromXData(iPlotID); // 获得军标数据从xData中
              if (iPlot) {
                iScale = proxy.getTxtBoxScale(iPlot.cp, iPlot.boxWH); // ctrlPnts, boxWH
              }
              // console.log(iScale)
              const iStyle = iFeatrues[i].getStyle();
              if (iStyle.getText()) {
                iStyle.getText().setScale(iScale);
                iFeatrues[i].setStyle(iStyle);
              }
            } else {
              const iStyle = iFeatrues[i].getStyle();
              if (iStyle.getText()) {
                const plotPnts = proxy.getCPntsPosByID(iPlotID); // 获取控制点和质心位置{ctrPnts: [Array(2), Array(2)], basePnt: 'cp'}
                // 数据由于延迟可能未读入，直接跳过(err)
                if (!plotPnts) return;
                //  文字不需要放大2倍，所以plotPnts.basePnt不需要为cp（cp要放大2）
                iScale = proxy.$refs.pVec.getRealScale(plotPnts.ctrPnts, "lm");
                iStyle.getText().setScale(iScale);
                iFeatrues[i].setStyle(iStyle);
                // console.log()
              }
            }
            // console.log(iType)
            // let iStyle = iFeatrues[i].getStyle()
            // if (iStyle.getText()) {
            //   // console.log(iFeatrues[i].getStyle().getText())
            //   // let cPnts = proxy.getCtrlPntsByID(iPlotID) // 被下面方法替换
            //   let plotPnts = proxy.getCPntsPosByID(iPlotID) // 获取控制点和质心位置{ctrPnts: [Array(2), Array(2)], basePnt: 'cp'}
            //   console.log(iFeatrues[i].getProperties())
            //   // iStyle.getText().setScale = proxy.$refs.getRealScale(cPnts)
            //   // let s = proxy.$refs.pVec.getRealScale(plotPnts.ctrPnts, plotPnts.basePnt) // 获取新的缩放因子
            //   // let s = proxy.$refs.pVec.getRealScale(plotPnts.ctrPnts, 'lm') //  文字不需要放大2倍，所以plotPnts.basePnt不需要为cp（cp要放大2）
            //   iScale = proxy.$refs.pVec.getRealScale(plotPnts.ctrPnts, 'lm')
            //   iStyle.getText().setScale(iScale)
            //   iFeatrues[i].setStyle(iStyle)
            //   // console.log()
            // }
          }
        }
      });
    },

    /* @description 判断是否初始化了标绘层plotting
     * @param  null
     * @return true 标绘层已经创建，false标绘层没有创建
     */
    hasPlottingLayer() {
      if (proxy.plottingLayer) return true;
      else return false;
    },

    // 文字缩放处理
    zoomTxt() {
      const iFeatrues = proxy.plottingLayer.getSource().getFeatures();
      let iScale = 1; // 缩放因子
      for (let i = 0; i < iFeatrues.length; i++) {
        // console.log(iFeatrues[i].getGeometry().getType() === 'Point')
        if (iFeatrues[i].getGeometry().getType() === "Point") {
          const iPlotID = iFeatrues[i].get("gid");
          const iType = iPlotID.substr(0, 4).toLowerCase();
          if (iType === "alt_") return; // 临时控制点，忽略
          // 处理自建文本
          if (iType === "text") {
            const iPlot = proxy.getPlotFromXData(iPlotID); // 获得军标数据从xData中
            if (iPlot) {
              iScale = proxy.getTxtBoxScale(iPlot.cp, iPlot.boxWH); // ctrlPnts, boxWH
              // console.log(iScale)
            }
            // console.log(iScale)
            const iStyle = iFeatrues[i].getStyle();
            if (iStyle.getText()) {
              iStyle.getText().setScale(iScale);
              iFeatrues[i].setStyle(iStyle);
            }
          } else {
            const iStyle = iFeatrues[i].getStyle();
            if (iStyle.getText()) {
              const plotPnts = proxy.getCPntsPosByID(iPlotID); // 获取控制点和质心位置{ctrPnts: [Array(2), Array(2)], basePnt: 'cp'}
              // 数据由于延迟可能未读入，直接跳过(err)
              if (!plotPnts) return;
              //  文字不需要放大2倍，所以plotPnts.basePnt不需要为cp（cp要放大2）
              iScale = proxy.$refs.pVec.getRealScale(plotPnts.ctrPnts, "lm");
              console.log(iScale);
              iStyle.getText().setScale(iScale);
              iFeatrues[i].setStyle(iStyle);
            }
          }
        }
      }
    },
    // 文字缩放结束

    // 设置xData中的数据信息(未完成)
    // 参数：plotId 军标ID； attrName 元素名称； attVal 要设置的元素值
    setPlotAttrByID(plotID, attrName, attVal) {
      // console.log(plotID, attrName, attVal,  proxy.xData.length)
      const numPlot = proxy.xData.length; // 获取当前军标数量
      if (numPlot < 1) return;
      for (let i = 0; i < numPlot; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          // proxy.xData[i].attrName = attVal  // 获取军标的控制点信息
          break;
        }
      }
    },

    /* Method：clearStyleList
     * 清除样式列表(iStyleList),清空列表并将缺省样式写
     */
    clearStyleList() {
      for (const key in proxy.iStyleList) {
        delete proxy.iStyleList[key];
      }
      proxy.iStyleName = "defStyle";
      proxy.iStyleList[proxy.iStyleName] = proxy.defStyle;
    },

    /* Method：clearData
     * 清除所有绘制内容
     */
    clearData() {
      if (proxy.plottingLayer) {
        proxy.plottingLayer.getSource().clear(); // 删除所有数据
        proxy.iPlottList.splice(0, proxy.iPlottList.length);
        // console.log(proxy.iPlottList)  // 0603注释
        // 暂时没有使用样式列表
        // proxy.clearStyleList()
        proxy.iType = null;
        proxy.iTypeWatch();
        // 清空xData[]军标元素的基本信息；xData[]记录每个所绘军标元素的基本信息
        proxy.xData.splice(0, proxy.xData.length);
      }
    },

    /* Method：clearPlotByGID--需要完善！！！
     * 根据提供的组id删除所绘制的军标
     */
    clearPlotByGID(gID) {
      if (!gID) return; // 组ID为空时，不做处理
      // let featureList = proxy.plottingLayer.getSource().getFeatures()
      // console.log(featureList, gID)
      // featureList.splice(0, 1)
      // proxy.plottingLayer.getSource()
      if (!proxy.plottingLayer) return null;
      const xSource = proxy.plottingLayer.getSource();
      xSource.getFeatures().forEach(function (feature) {
        // console.log(feature)
        if (feature.get("gid") === gID) {
          // console.log(gID)
          xSource.removeFeature(feature);
          // proxy.plottingLayer.getSource().removeFeature(feature)
        }
        // if(feature.getProperties().featureInfo.deviceCode=="abc"){ proxy.featureLayer.getSource().removeFeature(feature); } })
      });
    },

    /* Method：clearLayer
     * 删除标绘层
     */
    clearLayer() {
      if (proxy.plottingLayer) {
        const iSouce = proxy.plottingLayer.getSource(); // 删除原有绘制数据
        const features = iSouce.getFeatures();
        const len = features.length;
        for (let i = len - 1; i >= 0; i--) {
          iSouce.removeFeature(features[i]);
        }
        iSouce.clear(); // 删除原有测量数据 proxy.plottingLayer.getSource().clear()
        proxy.iMap.removeLayer(proxy.plottingLayer);
      }
    },

    /*
     * Method：geom2Featrue
     * 将从getFeature获得的数据{geoType:x.geoData:[{gid,type,data,style},{},...]}添加到标绘层
     * 参数：gData：{geoType:x.geoData:[{gid,type,data,style},{},...]}
     */
    // 带文字旋转 参数：sSRS表示数据的坐标格式（所有标绘操作都已'EPSG:3857'为准）
    geom2Featrue(plotData = proxy.plot_geometries, sSRS = "EPSG:3857") {
      if (!plotData) return;
      const sRCS = proxy.$parent.conf.RCS; // 地图的坐标系名称{String}
      const gType = plotData.geoType;
      const gData = plotData.geoData;
      let iGeom = null;
      let iFeature = null;
      alert(gType)
      if (gType === "GeometryCollection") {
        for (let i = 0; i < gData.length; i++) {
          const gID = gData[i].gid;
          let iType = gData[i].type;
          const iData = gData[i].data;
          const iStyle = gData[i].style;
          let newStyle = null;
          // console.log(gID,iType,iData,iStyle)
          iType = iType.toLowerCase();
          // console.log(iType)
          // 处理多边形
          if (iType === "polygon") {
            iGeom = new Polygon(iData);
            // 坐标转换为了china2000
            // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
            //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
            // }
            iFeature = new Feature(iGeom);
            // 需要添加控制点属性--待添加
            // iFeature.setProperties({gid:gID})
            // console.log(gID)
            iFeature.set("gid", gID);
            iFeature.set("type", "PLOT");
            // 属性创建
            if (iStyle.fill === "none" || !iStyle.fill) {
              // 没有填充颜色-1
              let strokeColor = iStyle.stroke;
              if (!strokeColor) {
                // 勾边色为空，设置为当前色
                strokeColor = proxy.currColor;
              }
              // 有勾边色，设置多边形为描边样式，边的颜色如果不是固有色，替换成当前色： B-1
              if (
                strokeColor &&
                strokeColor !== "#003F98" &&
                strokeColor !== "#FFF000" &&
                strokeColor !== "#009944" &&
                strokeColor !== "#004097" &&
                strokeColor !== "#FF0000" &&
                strokeColor !== "#0000FF" &&
                strokeColor !== "#00FF00" &&
                strokeColor !== "#FF60AF"
              ) {
                // 有描边色
                newStyle = new Style({
                  fill: new Fill({
                    color: "rgba(0,0,0,0)",
                  }),
                  stroke: new Stroke({
                    color: proxy.currColor,
                    width: iStyle.width ? iStyle.width : 0,
                  }),
                });
              } else if (
                strokeColor === "#003F98" ||
                strokeColor === "#FFF000" ||
                strokeColor === "#009944" ||
                strokeColor === "#004097" ||
                strokeColor === "#FF0000" ||
                strokeColor === "#0000FF" ||
                strokeColor === "#00FF00" ||
                strokeColor === "#FF60AF"
              ) {
                // B-2 勾边为固有色，勾边色保持不变！
                // console.log(strokeColor)
                newStyle = new Style({
                  fill: new Fill({
                    color: "rgba(0,0,0,0)",
                  }),
                  stroke: new Stroke({
                    color: strokeColor,
                    width: iStyle.width ? iStyle.width : 0,
                  }),
                });
              }
              // iFeature.setStyle(iStyle)
              // 样式数据写入当前绘制军标数据中（currPlot）-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
              // 原型 setCurrPlot (ID, plotName = proxy.iType, ctrlPoint = null, SCALE = 1, ROTATE = 0, COLOR = proxy.currColor, UNIT = null, STYLE = null)
              // 原型 setCurrPlotStyle (Fill = 'none', Stroke = null, Width = 0, LineDash = null, TEXT = null, Font = null) getText
              // proxy.setCurrPlotStyle('none',newStyle.getStroke().getColor(),newStyle.getStroke().getWidth())
              // console.log(proxy.currPlot)
              proxy.currPlot.style = null;
            } else {
              // 多边形有填充色-2
              // 多边形有填充色，非固有色。使用当前颜色2-1
              if (
                iStyle.fill !== "#003F98" &&
                iStyle.fill !== "#FFF000" &&
                iStyle.fill !== "#009944" &&
                iStyle.fill !== "#004097" &&
                iStyle.fill !== "#ffffff" &&
                iStyle.fill !== "#000000" &&
                iStyle.fill !== "#FF0000" &&
                iStyle.fill !== "#0000FF" &&
                iStyle.fill !== "#00FF00" &&
                iStyle.fill !== "#FF60AF"
              ) {
                const iFill = proxy.currColor;
                let strokeColor = iStyle.stroke;
                const iWidth = iStyle.width;
                // 获取勾边宽度，没有或为0，表示没有勾边
                if (iWidth === 0 || !iWidth) {
                  strokeColor = null;
                }
                if (!strokeColor) {
                  // 勾边色为空，只有填充；无勾边 2-1-1
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                  });
                } else if (
                  strokeColor &&
                  strokeColor !== "#003F98" &&
                  strokeColor !== "#FFF000" &&
                  strokeColor !== "#009944" &&
                  iStyle.fill !== "#004097" &&
                  strokeColor !== "#FF0000" &&
                  strokeColor !== "#0000FF" &&
                  strokeColor !== "#00FF00" &&
                  strokeColor !== "#FF60AF"
                ) {
                  // 有描边色
                  // 有描边色，且不是固有色，替换成当前色（样式：多边形有颜色-当前色，边使用当前色）2-1-2
                  // if ( strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: proxy.currColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                  // 描边色是固有色，使用固有描边色（样式：多边形有颜色-当前色，边使用固有色）2-1-3
                } else if (
                  strokeColor === "#003F98" ||
                  strokeColor === "#FFF000" ||
                  strokeColor === "#009944" ||
                  strokeColor === "#004097" ||
                  strokeColor === "#FF0000" ||
                  strokeColor === "#0000FF" ||
                  strokeColor === "#00FF00" ||
                  strokeColor === "#FF60AF"
                ) {
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: strokeColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                }
              } else {
                // 填充色为固有色 2-2
                const iFill = iStyle.fill;
                let strokeColor = iStyle.stroke;
                const iWidth = iStyle.width;
                // 获取勾边宽度，没有或为0，表示没有勾边
                if (iWidth === 0 || !iWidth) {
                  strokeColor = null;
                }
                if (!strokeColor) {
                  // 勾边色为空，只有填充；无勾边 2-2-1
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                  });
                } else if (
                  strokeColor &&
                  strokeColor !== "#003F98" &&
                  strokeColor !== "#FFF000" &&
                  strokeColor !== "#009944" &&
                  strokeColor !== "#004097" &&
                  strokeColor !== "#FF0000" &&
                  strokeColor !== "#0000FF" &&
                  strokeColor !== "#00FF00" &&
                  strokeColor !== "#FF60AF"
                ) {
                  // 有描边色
                  // （样式：多边形有颜色-固有色，边使用当前色）2-2-2
                  // if ( strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: proxy.currColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                  // （样式：多边形有颜色-固有色，描边使用固有色）2-2-3
                } else if (
                  strokeColor === "#003F98" ||
                  strokeColor === "#FFF000" ||
                  strokeColor === "#009944" ||
                  strokeColor === "#004097" ||
                  strokeColor === "#FF0000" ||
                  strokeColor === "#0000FF" ||
                  strokeColor === "#00FF00" ||
                  strokeColor === "#FF60AF"
                ) {
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: strokeColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                }
              }
              // 设置图形样式信息--保存数据用！-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
              // let iStroke = newStyle.getStroke()
              // console.log(iStroke)
              // if (iStroke) {
              //   proxy.setCurrPlotStyle(newStyle.getFill(),newStyle.getStroke().getColor(),newStyle.getStroke().getWidth())
              // } else {
              //   proxy.setCurrPlotStyle(newStyle.getFill())
              // }
              proxy.currPlot.style = null;
              // console.log(proxy.currPlot)
            }
            // 设置虚线--如果设置了style.lineDash参数需要设置虚线
            if (iStyle.lineDash) {
              const iStroke = newStyle.getStroke();
              iStroke.setLineDash(iStyle.lineDash);
            }
            // 属性添加到Featrue
            iFeature.setStyle(newStyle);
          }
          if (iType === "linestring") {
            iGeom = new LineString(iData);
            // 坐标转换为了china2000
            // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
            //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
            // }
            iFeature = new Feature(iGeom);
            // 需要添加控制点属性--待添加
            // iFeature.setProperties({gid:gID})
            iFeature.set("gid", gID);
            iFeature.set("type", "PLOT");
            // 属性创建

            let strokeColor = iStyle.stroke;
            if (!strokeColor) {
              // 勾边色为空，设置为当前色
              strokeColor = proxy.currColor;
            }
            alert(strokeColor)
            // console.log(gID, strokeColor)
            // 有勾边色，设置多边形为描边样式，边的颜色如果不是固有色，替换成当前色： B-1
            if (
              strokeColor &&
              strokeColor !== "#003F98" &&
              strokeColor !== "#FFF000" &&
              strokeColor !== "#009944" &&
              strokeColor !== "#004097" &&
              strokeColor !== "#FF0000" &&
              strokeColor !== "#0000FF" &&
              strokeColor !== "#00FF00" &&
              strokeColor !== "#FF60AF" &&
              strokeColor !== "#FFFFFF" &&
              strokeColor !== "#000000" &&
              strokeColor !== "#DEB887"
            ) {
              // 有描边色
              newStyle = new Style({
                stroke: new Stroke({
                  color: proxy.currColor,
                  width: iStyle.width ? iStyle.width : 2,
                }),
              });
            } else if (
              strokeColor === "#003F98" ||
              strokeColor === "#FFF000" ||
              strokeColor === "#009944" ||
              strokeColor === "#004097" ||
              strokeColor === "#FF0000" ||
              strokeColor === "#0000FF" ||
              strokeColor === "#00FF00" ||
              strokeColor === "#FF60AF" ||
              strokeColor === "#FFFFFF" ||
              strokeColor === "#000000" ||
              strokeColor === "#DEB887"
            ) {
              // B-2 勾边为固有色，勾边色保持不变！
              newStyle = new Style({
                stroke: new Stroke({
                  // color: '#004097',
                  color: strokeColor,
                  width: iStyle.width ? iStyle.width : 2,
                }),
              });
            }

            // 设置虚线--如果设置了style.lineDash参数需要设置虚线
            if (iStyle.lineDash) {
              const iStroke = newStyle.getStroke();
              iStroke.setLineDash(iStyle.lineDash);
            }
            // 属性添加到Featrue
            iFeature.setStyle(newStyle);
            // 设置图形样式信息--保存数据用！-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
            // proxy.setCurrPlotStyle('none',newStyle.getStroke().getColor(),newStyle.getStroke().getWidth())
            // console.log(proxy.currPlot)
            proxy.currPlot.style = null;
          }
          if (iType === "point") {
            const resolution = proxy.iMap.getView().getResolution();
            // console.log(resolution)
            iGeom = new Point(iData[0]);
            // 坐标转换为了china2000
            // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
            //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
            // }
            iFeature = new Feature(iGeom);
            iFeature.set("gid", gID);
            iFeature.set("type", "PLOT");
            // let x = 14 * 84 * iData[1][0]/ resolution
            // console.log(iStyle.rotate)
            let txtRot;
            if (iStyle.rotate) {
              //  || iStyle.rotate === 0
              txtRot = iStyle.rotate;
            } else {
              txtRot = 0;
            }
            // console.log(txtRot)
            // 创建样式
            newStyle = new Style({
              text: new Text({
                // 位置
                textAlign: "left", // 'left', 'right', 'center', 'end' or 'start'.
                // 基准线
                textBaseline: "middle", // 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
                // 文字样式
                font: iStyle.font, // 默认格式 'normal 14px 微软雅黑',
                // font: 'normal' + x + 'px 微软雅黑',
                // 文本内容
                text: iStyle.txt,
                scale: iData[1][0], // 文字数据信息[[点的地理坐标x， y]，[文字的缩放*，文字的旋转]]
                rotation: txtRot,
                // 文字旋转
                // 文本填充样式（即文字颜色）
                fill: new Fill({ color: "#000000" }),
                stroke: new Stroke({ color: "#FFFFFF", width: 1 }),
              }),
            });
            // 属性添加到Featrue
            iFeature.setStyle(newStyle);
            // 设置图形样式信息--保存数据用！-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
            // proxy.setCurrPlotStyle('#000000', '#FFFFFF', 1, null, iStyle.txt, iStyle.font)
            // console.log(proxy.currPlot)
            proxy.currPlot.style = null;
          }
          // 绘制cyy添加的circle
          if (iType === "circle") {
            // 获得两个控制点
            const cp1 = iData[0];
            const cp2 = iData[1];
            // 求两个点的距离(半径)--可能需要进行坐标转换，转换到3857，计算长度。（坐标转换）
            const r = plot.CalLengthOfTwoPoints(cp1, cp2);
            // 绘制圆--new Circle(center, opt_radius)
            iGeom = new geoCircle(cp1, r); // 生成圆
            // 坐标转换为了china2000
            // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
            //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
            // }
            iFeature = new Feature(iGeom); // 生成feature
            // 需要添加控制点属性--待添加
            // iFeature.setProperties({gid:gID})
            // console.log(gID)
            iFeature.set("gid", gID);
            iFeature.set("type", "PLOT");
            // 属性创建
            if (iStyle.fill === "none" || !iStyle.fill) {
              // 没有填充颜色-1
              let strokeColor = iStyle.stroke;
              if (!strokeColor) {
                // 勾边色为空，设置为当前色
                strokeColor = proxy.currColor;
              }
              // 有勾边色，设置多边形为描边样式，边的颜色如果不是固有色，替换成当前色： B-1
              if (
                strokeColor &&
                strokeColor !== "#003F98" &&
                strokeColor !== "#FFF000" &&
                strokeColor !== "#009944" &&
                strokeColor !== "#004097" &&
                strokeColor !== "#FF0000" &&
                strokeColor !== "#0000FF" &&
                strokeColor !== "#00FF00" &&
                strokeColor !== "#FF60AF"
              ) {
                // 有描边色
                newStyle = new Style({
                  fill: new Fill({
                    color: "rgba(0,0,0,0)",
                  }),
                  stroke: new Stroke({
                    color: proxy.currColor,
                    width: iStyle.width ? iStyle.width : 0,
                  }),
                });
              } else if (
                strokeColor === "#003F98" ||
                strokeColor === "#FFF000" ||
                strokeColor === "#009944" ||
                strokeColor === "#004097" ||
                strokeColor === "#FF0000" ||
                strokeColor === "#0000FF" ||
                strokeColor === "#00FF00" ||
                strokeColor === "#FF60AF"
              ) {
                // B-2 勾边为固有色，勾边色保持不变！
                newStyle = new Style({
                  fill: new Fill({
                    color: "rgba(0,0,0,0)",
                  }),
                  stroke: new Stroke({
                    color: strokeColor,
                    width: iStyle.width ? iStyle.width : 0,
                  }),
                });
              }
              // iFeature.setStyle(iStyle)
              // 样式数据写入当前绘制军标数据中（currPlot）-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
              // 原型 setCurrPlot (ID, plotName = proxy.iType, ctrlPoint = null, SCALE = 1, ROTATE = 0, COLOR = proxy.currColor, UNIT = null, STYLE = null)
              // 原型 setCurrPlotStyle (Fill = 'none', Stroke = null, Width = 0, LineDash = null, TEXT = null, Font = null) getText
              // proxy.setCurrPlotStyle('none',newStyle.getStroke().getColor(),newStyle.getStroke().getWidth())
              // console.log(proxy.currPlot)
              proxy.currPlot.style = null;
            } else {
              // 多边形有填充色-2
              // 多边形有填充色，非固有色。使用当前颜色2-1
              if (
                iStyle.fill !== "#003F98" &&
                iStyle.fill !== "#FFF000" &&
                iStyle.fill !== "#009944" &&
                iStyle.fill !== "#004097" &&
                iStyle.fill !== "#FF0000" &&
                iStyle.fill !== "#0000FF" &&
                iStyle.fill !== "#00FF00" &&
                iStyle.fill !== "#FF60AF"
              ) {
                const iFill = proxy.currColor;
                let strokeColor = iStyle.stroke;
                const iWidth = iStyle.width;
                // 获取勾边宽度，没有或为0，表示没有勾边
                if (iWidth === 0 || !iWidth) {
                  strokeColor = null;
                }
                if (!strokeColor) {
                  // 勾边色为空，只有填充；无勾边 2-1-1
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                  });
                } else if (
                  strokeColor &&
                  strokeColor !== "#003F98" &&
                  strokeColor !== "#FFF000" &&
                  strokeColor !== "#009944" &&
                  iStyle.fill !== "#004097" &&
                  strokeColor !== "#FF0000" &&
                  strokeColor !== "#0000FF" &&
                  strokeColor !== "#00FF00" &&
                  strokeColor !== "#FF60AF"
                ) {
                  // 有描边色
                  // 有描边色，且不是固有色，替换成当前色（样式：多边形有颜色-当前色，边使用当前色）2-1-2
                  // if ( strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: proxy.currColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                  // 描边色是固有色，使用固有描边色（样式：多边形有颜色-当前色，边使用固有色）2-1-3
                } else if (
                  strokeColor === "#003F98" ||
                  strokeColor === "#FFF000" ||
                  strokeColor === "#009944" ||
                  strokeColor === "#004097" ||
                  strokeColor === "#FF0000" ||
                  strokeColor === "#0000FF" ||
                  strokeColor === "#00FF00" ||
                  strokeColor === "#FF60AF"
                ) {
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: strokeColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                }
              } else {
                // 填充色为固有色 2-2
                const iFill = iStyle.fill;
                let strokeColor = iStyle.stroke;
                const iWidth = iStyle.width;
                // 获取勾边宽度，没有或为0，表示没有勾边
                if (iWidth === 0 || !iWidth) {
                  strokeColor = null;
                }
                if (!strokeColor) {
                  // 勾边色为空，只有填充；无勾边 2-2-1
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                  });
                } else if (
                  strokeColor &&
                  strokeColor !== "#003F98" &&
                  strokeColor !== "#FFF000" &&
                  strokeColor !== "#009944" &&
                  strokeColor !== "#004097" &&
                  strokeColor !== "#FF0000" &&
                  strokeColor !== "#0000FF" &&
                  strokeColor !== "#00FF00" &&
                  strokeColor !== "#FF60AF"
                ) {
                  // 有描边色
                  // （样式：多边形有颜色-固有色，边使用当前色）2-2-2
                  // if ( strokeColor && strokeColor !== '#003F98' && strokeColor !== '#FFF000' && strokeColor !== '#009944') { // 有描边色
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: proxy.currColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                  // （样式：多边形有颜色-固有色，描边使用固有色）2-2-3
                } else if (
                  strokeColor === "#003F98" ||
                  strokeColor === "#FFF000" ||
                  strokeColor === "#009944" ||
                  strokeColor === "#004097" ||
                  strokeColor === "#FF0000" ||
                  strokeColor === "#0000FF" ||
                  strokeColor === "#00FF00" ||
                  strokeColor === "#FF60AF"
                ) {
                  newStyle = new Style({
                    fill: new Fill({
                      color: iFill,
                    }),
                    stroke: new Stroke({
                      color: strokeColor,
                      width: iStyle.width ? iStyle.width : 0,
                    }),
                  });
                }
              }
              // 设置图形样式信息--保存数据用！-- icon和dire及mult方式只需要颜色就可以了，不需要使用样式！
              // let iStroke = newStyle.getStroke()
              // console.log(iStroke)
              // if (iStroke) {
              //   proxy.setCurrPlotStyle(newStyle.getFill(),newStyle.getStroke().getColor(),newStyle.getStroke().getWidth())
              // } else {
              //   proxy.setCurrPlotStyle(newStyle.getFill())
              // }
              proxy.currPlot.style = null;
              // console.log(proxy.currPlot)
            }

            // 设置虚线--如果设置了style.lineDash参数需要设置虚线
            if (iStyle.lineDash) {
              const iStroke = newStyle.getStroke();
              iStroke.setLineDash(iStyle.lineDash);
            }
            // 属性添加到Featrue
            iFeature.setStyle(newStyle);
          }
          proxy.plottingLayer.getSource().addFeature(iFeature);
        }
      }
    },

    /*
     * Method：addInteraction
     * 定义自己的交互操作
     * 根据iType类型进行标绘
     */
    addInteraction() {
      let value = proxy.iType;
      let iMaxPoints = null;
      if (!value) return; // 没有绘制样式时推出(null就返回)
      if (value.length < 4) return; // 长度不满足要求不做处理
      // value = proxy.iType.substr(0, 4)  // 获取前四个字母
      const drawType = proxy.iType.substr(0, 4).toLowerCase();
      if (
        drawType === "icon" ||
        drawType === "dire" ||
        drawType === "mult" ||
        drawType === "ddir"
      ) {
        // 三种vector类型处理
        value = drawType;
      }
      // value = value.toLowerCase()
      // console.log(value)
      if (value !== "none") {
        // None
        let geometryFunction;
        if (value === "text") {
          value = "Point";
        } else if (value === "unionRange") {
          // Square
          value = "Circle";
        } else if (value === "Square") {
          // Square
          value = "Circle";
          geometryFunction = createRegularPolygon(4);
        } else if (value === "rect") {
          // Box
          value = "Circle";
          geometryFunction = createBox();
        } else if (value === "bbox") {
          // BBox:范围盒创建绘制
          value = "Circle";
          geometryFunction = createBox();
        } else if (value === "icon") {
          // 绘制军标
          // value = 'Point'
          value = "Circle";
          geometryFunction = (coordinates, geometry) => {
            // 去除错误提示
            // console.log(geometry)
            if (coordinates.length > 1) proxy.endPlotting();
            // 将地理坐标转换成屏幕坐标
            const screenCoord = proxy.iMap.getPixelFromCoordinate(
              coordinates[0]
            );
            // console.log(screenCoord)
            // 获得生成的军标图元{geoType：'xxx', geodata:[{},{}]}
            // proxy.plot_geometries = proxy.$refs.pVec.getFeature([screenCoord], value, proxy.$parent.iActType, proxy.iMap)
            console.log(proxy.$parent)
            proxy.plot_geometries = proxy.$refs.pVec.getFeature(
              [screenCoord],
              "icon",
              proxy.$parent.iActType,
              proxy.iMap
            );
            // let geometryList = proxy.parseGeometry(newCoordinates)
            // 设置军标的线宽
            // proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth)
            proxy.setSVGStyle(
              proxy.plot_geometries,
              proxy.strokeWidth,
              proxy.currColor
            );
            // console.log(proxy.plot_geometries)
            proxy.geom2Featrue(proxy.plot_geometries); // 将军标绘制到标绘层（样式处理）

            // 将当前军标写入，军标数组！
            proxy.currPlotAddUserTime(); // 添加用户和时间戳
            proxy.xData.push(JSON.parse(JSON.stringify(proxy.currPlot)));
            proxy.$parent.emitFun("plotupdata", {
              act: "add",
              data: proxy.iType,
            }); //  发送事件，告知军标绘制完成3
            proxy.endPlotting();
            // demo
            // let feas =proxy.plottingLayer.getSource().getFeatures()
            // console.log(proxy.currPlot)
            // console.log(proxy.xData)
          };
          // value = 'Point'
          // geometryFunction = createBox()
        } else if (value === "dire") {
          // 绘制定向军标，有方向
          const drawType = value;
          value = "Circle";
          // value = 'LineString'
          // iMaxPoints = 2
          geometryFunction = (coordinates, geometry) => {
            // 将地理坐标转换成屏幕坐标
            // console.log(coordinates)
            if (coordinates.length < 2) return; // 定向军标需要两个控制点（原点和方向）
            const cp1 = proxy.iMap.getPixelFromCoordinate(coordinates[0]); // 控制点1：中心点
            const cp2 = proxy.iMap.getPixelFromCoordinate(coordinates[1]); // 控制点2：方向点
            // console.log(cp1,cp2)
            // 军标数据获取
            proxy.plot_geometries = proxy.$refs.pVec.getFeature(
              [cp1, cp2],
              drawType,
              proxy.$parent.iActType,
              proxy.iMap
            );
            const geometryList = proxy.parseGeometry(proxy.plot_geometries); // 返回生成的geometry如：[polygon,linestring,...] 提供给下面生成geometrycollection
            // 绘制临时显示的军标
            // console.log(geometryList)
            if (!geometry) {
              // geometry = new MultiLineString(newCoordinates)
              geometry = new GeometryCollection(geometryList);
              // geometry = new LineString(coordinates)
            } else {
              geometry.setGeometries(geometryList);
              // geometry.setCoordinates(coordinates)
            }
            // console.log(geometry)
            return geometry;
          };
          // value = 'Point'
          // geometryFunction = createBox()
        } else if (value === "ddir") {
          // 绘制定向军标，svg根据方向有两个
          const drawType = value;
          value = "Circle";
          geometryFunction = (coordinates, geometry) => {
            // 将地理坐标转换成屏幕坐标
            // console.log(coordinates)
            if (coordinates.length < 2) return; // 定向军标需要两个控制点（原点和方向）
            const cp1 = proxy.iMap.getPixelFromCoordinate(coordinates[0]); // 控制点1：中心点
            const cp2 = proxy.iMap.getPixelFromCoordinate(coordinates[1]); // 控制点2：方向点
            // console.log(cp1,cp2)
            // 军标数据获取
            proxy.plot_geometries = proxy.$refs.pVec.getFeature(
              [cp1, cp2],
              drawType,
              proxy.$parent.iActType,
              proxy.iMap
            );
            const geometryList = proxy.parseGeometry(proxy.plot_geometries); // 返回生成的geometry如：[polygon,linestring,...] 提供给下面生成geometrycollection
            // 绘制临时显示的军标
            // console.log(geometryList)
            if (!geometry) {
              geometry = new GeometryCollection(geometryList);
            } else {
              geometry.setGeometries(geometryList);
            }
            // console.log(geometry)
            return geometry;
          };
          // value = 'Point'
          // geometryFunction = createBox()
        } else if (value === "Star") {
          // Star,启动到前面去
          value = "Circle";
          geometryFunction = function (coordinates, geometry) {
            const center = coordinates[0];
            const last = coordinates[1];
            const dx = center[0] - last[0];
            const dy = center[1] - last[1];
            const radius = Math.sqrt(dx * dx + dy * dy);
            const rotation = Math.atan2(dy, dx);
            const newCoordinates = [];
            const numPoints = 12;
            for (let i = 0; i < numPoints; ++i) {
              const angle = rotation + (i * 2 * Math.PI) / numPoints;
              const fraction = i % 2 === 0 ? 1 : 0.5;
              const offsetX = radius * fraction * Math.cos(angle);
              const offsetY = radius * fraction * Math.sin(angle);
              newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
            }
            newCoordinates.push(newCoordinates[0].slice());
            if (!geometry) {
              geometry = new Polygon([newCoordinates]);
            } else {
              geometry.setCoordinates([newCoordinates]);
            }
            return geometry;
          };
        } else if (value === "mult") {
          // 线条箭头类(SingleLineArrow:简单线箭头>,SingleSolidArrow：getSSArrowPnts)
          // 获取绘制方法名称
          let funName = proxy.iType.split("_")[1];
          // 获取绘制点数_名称最后一位
          const maxPnt = funName.substr(funName.length - 1, 1);
          // 最后一位为数字，需要设置绘制控制点数量，修改方法名称
          if (!isNaN(maxPnt)) {
            // || (isNaN(maxPnt) && isNaN(maxPnt) > 0)) {
            iMaxPoints = parseInt(maxPnt);
            funName = funName.substr(0, funName.length - 1);
          }
          // console.log(funName)
          if (!funName) return;
          // 绘制方式，用来控制绘制点数量
          value = "LineString";
          // 查看方法是否存在，不存在退出！
          const func = plot.getFunc(funName);
          // 方法不存在退出绘制！
          if (!func) return;
          // 开始绘制箭头类形军标
          geometryFunction = (coordinates, geometry) => {
            // console.log(coordinates, geometry)
            // 返回绘制箭头所需的--几何元素
            // let newCoordinates = plot.getSLArrowPnts2(coordinates, 0.15, 0.3, 0.75)
            // let newCoordinates = func(coordinates) // , 0.15, 0.3, 0.75)
            proxy.plot_geometries = func(coordinates); // 返回组成军标的所有数据[geoType:xx,geoData:[{图元1},{图元2}...];但是图元信息不全
            // proxy.plot_geometries = plot.getDoubleArrowPnts(coordinates, 0.2, 0.5, 0.8, 0.2)
            // 和icon相比，mult只返回了坐标点（屏幕）
            /* {
              gid：缺失
              type: v
              data: v
              style: 缺失
            } */
            // console.log(proxy.plot_geometries)
            const geometryList = proxy.parseGeometry(proxy.plot_geometries); // 返回生成的geometry如：[polygon,linestring,...] 提供给下面生成geometrycollection

            // 所有绘制plot均视为GeometryCollection
            // console.log(geometryList)
            if (!geometry) {
              // geometry = new MultiLineString(newCoordinates)
              geometry = new GeometryCollection(geometryList);
            } else {
              geometry.setGeometries(geometryList);
            }
            // console.log(proxy.plot_geometries)
            // 绘制控制点记录
            proxy.currPlot.cp = coordinates; // 只要cp为有用数据，其他为“脏”数据
            // console.log(proxy.currPlot)
            // 绘制临时图像-drawend中写入军标绘制层
            return geometry;
          };
        } else if (value === "infoBox") {
          // 提示或注释框
          value = "LineString";
          iMaxPoints = 3;
          geometryFunction = function (coordinates, geometry) {
            const newCoordinates = [];
            const iBbox = [];
            // console.log(coordinates)
            if (coordinates.length === 1) {
              newCoordinates.push(
                coordinates[0],
                coordinates[0],
                coordinates[0]
              );
            } else if (coordinates.length === 2) {
              iBbox.push(
                coordinates[0][0] <= coordinates[1][0]
                  ? coordinates[0][0]
                  : coordinates[1][0]
              );
              iBbox.push(
                coordinates[0][1] <= coordinates[1][1]
                  ? coordinates[0][1]
                  : coordinates[1][1]
              );
              iBbox.push(
                coordinates[0][0] > coordinates[1][0]
                  ? coordinates[0][0]
                  : coordinates[1][0]
              );
              iBbox.push(
                coordinates[0][1] > coordinates[1][1]
                  ? coordinates[0][1]
                  : coordinates[1][1]
              );
              // console.log(iBbox)
              newCoordinates.push(
                [iBbox[0], iBbox[1]],
                [iBbox[0], iBbox[3]],
                [iBbox[2], iBbox[3]],
                [iBbox[2], iBbox[1]],
                [iBbox[0], iBbox[1]]
              );
            } else if (coordinates.length >= 3) {
              iBbox.push(
                coordinates[0][0] <= coordinates[1][0]
                  ? coordinates[0][0]
                  : coordinates[1][0]
              );
              iBbox.push(
                coordinates[0][1] <= coordinates[1][1]
                  ? coordinates[0][1]
                  : coordinates[1][1]
              );
              iBbox.push(
                coordinates[0][0] > coordinates[1][0]
                  ? coordinates[0][0]
                  : coordinates[1][0]
              );
              iBbox.push(
                coordinates[0][1] > coordinates[1][1]
                  ? coordinates[0][1]
                  : coordinates[1][1]
              );
              // let pt1st = coordinates[0]
              // let pt2nd = coordinates[1]
              const pt3rd = coordinates[2];
              // console.log(pt3rd)
              // iBbox [minX-0,minY-1 ,maxX-2,maxY-3]
              if (iBbox[0] < pt3rd[0] && pt3rd[0] < iBbox[2]) {
                // 在box的x范围内
                // console.log(iBbox[0], pt3rd[0], iBbox[2])
                // console.log(iBbox[1], pt3rd[1], iBbox[3])
                if (iBbox[1] < pt3rd[1] && pt3rd[1] < iBbox[3]) {
                  // 在box的y范围内
                  // 在绘制的盒子box中，不显示小尾巴
                  // console.log('在绘制的盒子box中，不显示小尾巴')
                  newCoordinates.push(
                    [iBbox[0], iBbox[1]],
                    [iBbox[0], iBbox[3]],
                    [iBbox[2], iBbox[3]],
                    [iBbox[2], iBbox[1]],
                    [iBbox[0], iBbox[1]]
                  );
                } else if (pt3rd[1] > iBbox[3]) {
                  // 小尾巴在box上边
                  // console.log('小尾巴在box上边')
                  const p1 = [iBbox[0], iBbox[3]];
                  const p2 = [iBbox[2], iBbox[3]];
                  const d = Math.sqrt(
                    (p1[0] - p2[0]) * (p1[0] - p2[0]) +
                      (p1[1] - p2[1]) * (p1[1] - p2[1])
                  );
                  const tithe = d / 10;
                  const pp1 = [p1[0] + tithe * 4, p1[1]];
                  const pp2 = [p1[0] + tithe * 6, p1[1]];
                  // console.log(pp1,pp2)
                  newCoordinates.push(
                    [iBbox[0], iBbox[1]],
                    [iBbox[0], iBbox[3]],
                    pp1,
                    pt3rd,
                    pp2,
                    [iBbox[2], iBbox[3]],
                    [iBbox[2], iBbox[1]],
                    [iBbox[0], iBbox[1]]
                  );
                  // console.log(newCoordinates)
                } else if (pt3rd[1] < iBbox[1]) {
                  // 小尾巴在box下边
                  // console.log('小尾巴在box下边')
                  const p1 = [iBbox[0], iBbox[1]]; // 左下角坐标
                  const p2 = [iBbox[2], iBbox[1]]; // 右下角坐标
                  const d = Math.sqrt(
                    (p1[0] - p2[0]) * (p1[0] - p2[0]) +
                      (p1[1] - p2[1]) * (p1[1] - p2[1])
                  );
                  const tithe = d / 10;
                  const pp1 = [p1[0] + tithe * 4, p1[1]];
                  const pp2 = [p1[0] + tithe * 6, p1[1]];
                  // 注意最有一个封口线的顺序（顺时针pp2, pt3rd, pp1, ）
                  newCoordinates.push(
                    [iBbox[0], iBbox[1]],
                    [iBbox[0], iBbox[3]],
                    [iBbox[2], iBbox[3]],
                    [iBbox[2], iBbox[1]],
                    pp2,
                    pt3rd,
                    pp1,
                    [iBbox[0], iBbox[1]]
                  );
                }
              } else if (iBbox[1] < pt3rd[1] < iBbox[3]) {
                // 在box的y范围内
                if (pt3rd[0] > iBbox[2]) {
                  // 小尾巴在box右边
                  // console.log('小尾巴在box右边')
                  const p1 = [iBbox[2], iBbox[3]]; // 右下角坐标
                  const p2 = [iBbox[2], iBbox[1]]; // 右下角坐标
                  const d = Math.sqrt(
                    (p1[0] - p2[0]) * (p1[0] - p2[0]) +
                      (p1[1] - p2[1]) * (p1[1] - p2[1])
                  );
                  const tithe = d / 10;
                  const pp1 = [p1[0], p1[1] - tithe * 4];
                  const pp2 = [p1[0], p1[1] - tithe * 6];
                  // 注意最有一个封口线的顺序（顺时针pp2, pt3rd, pp1, ）
                  newCoordinates.push(
                    [iBbox[0], iBbox[1]],
                    [iBbox[0], iBbox[3]],
                    [iBbox[2], iBbox[3]],
                    pp1,
                    pt3rd,
                    pp2,
                    [iBbox[2], iBbox[1]],
                    [iBbox[0], iBbox[1]]
                  );
                } else if (pt3rd[0] < iBbox[0]) {
                  // 小尾巴在box左边
                  // console.log('小尾巴在box左边')
                  const p1 = [iBbox[0], iBbox[1]]; // 右下角坐标
                  const p2 = [iBbox[0], iBbox[3]]; // 右下角坐标
                  const d = Math.sqrt(
                    (p1[0] - p2[0]) * (p1[0] - p2[0]) +
                      (p1[1] - p2[1]) * (p1[1] - p2[1])
                  );
                  const tithe = d / 10;
                  const pp1 = [p1[0], p1[1] + tithe * 4];
                  const pp2 = [p1[0], p1[1] + tithe * 6];
                  // 注意最有一个封口线的顺序（顺时针pp2, pt3rd, pp1）
                  newCoordinates.push(
                    [iBbox[0], iBbox[1]],
                    pp1,
                    pt3rd,
                    pp2,
                    [iBbox[0], iBbox[3]],
                    [iBbox[2], iBbox[3]],
                    [iBbox[2], iBbox[1]],
                    [iBbox[0], iBbox[1]]
                  );
                } else {
                  // 鼠标在四角，不显示小尾巴
                  newCoordinates.push(
                    [iBbox[0], iBbox[1]],
                    [iBbox[0], iBbox[3]],
                    [iBbox[2], iBbox[3]],
                    [iBbox[2], iBbox[1]],
                    [iBbox[0], iBbox[1]]
                  );
                }
              }
            }

            if (!geometry) {
              geometry = new Polygon([newCoordinates]);
            } else {
              geometry.setCoordinates([newCoordinates]);
            }
            return geometry;
          };
        } else if (value === "flagPlus") {
          // 可添加数量的旗帜
          value = "Circle";
          geometryFunction = function (coordinates, geometry) {
            const newCoordinates = [];
            // console.log(coordinates)
            if (coordinates.length === 1) {
              newCoordinates.push(coordinates[0], coordinates[0]);
            } else if (coordinates.length === 2) {
              const cp1 = coordinates[0];
              const cp2 = coordinates[1];
              const xDist = Math.abs(cp2[0] - cp1[0]);
              const yDist = Math.abs(cp2[1] - cp1[1]);
              const d = xDist > yDist ? xDist : yDist;
              const dUnit = d / 5;
              const p2 = [cp1[0], cp1[1] + d];
              // let p3 = [p2[0] + 4 * dUnit, cp2[1]]
              // let p4 = [p3[0], p3[1] - 2 * dUnit]
              const p3 = [cp1[0] + 5 * dUnit, cp1[1] + 5 * dUnit];
              const p4 = [cp1[0] + 5 * dUnit, cp1[1] + 3 * dUnit];
              const p5 = [cp1[0], cp1[1] + dUnit * 3];
              newCoordinates.push(cp1, p2, p3, p4, p5, cp1);
            }
            if (!geometry) {
              geometry = new Polygon([newCoordinates]);
            } else {
              geometry.setCoordinates([newCoordinates]);
            }
            return geometry;
          };
        } else if (value === "triangle") {
          // 三角形，实现牵引线
          value = "LineString";
          iMaxPoints = 3;
          geometryFunction = function (coordinates, geometry) {
            const newCoordinates = [];
            // console.log(coordinates)
            if (coordinates.length === 1) {
              newCoordinates.push(
                coordinates[0],
                coordinates[0],
                coordinates[0]
              );
            } else if (coordinates.length === 2) {
              newCoordinates.push(
                coordinates[0],
                coordinates[1],
                coordinates[1],
                coordinates[0]
              );
            } else if (coordinates.length >= 3) {
              newCoordinates.push(
                coordinates[0],
                coordinates[1],
                coordinates[2],
                coordinates[0]
              );
            }
            if (!geometry) {
              geometry = new Polygon([newCoordinates]);
            } else {
              geometry.setCoordinates([newCoordinates]);
            }
            // console.log(geometry)
            return geometry;
          };
        } else if (value === "plott") {
          // 圆型图标
          value = "Point";
          iMaxPoints = 1;
        }
        proxy.iDraw = new Draw({
          // source: proxy.plottingLayer.getSource(), // 关闭绘图自动保留功能，自己写入标绘图层；
          type: value,
          maxPoints: iMaxPoints,
          geometryFunction: geometryFunction, // ,
          //   style: new Style({            // 设置绘制时的样式
          //     fill: new Fill({ // ol.style.Fill
          //       color: proxy.currColor  //'#FF0000'
          //     }),
          //     stroke: new Stroke({
          //         color: proxy.currColor, // '#FF0000',
          //         size: 3
          //     })
          // }),
        });
        proxy.iMap.addInteraction(proxy.iDraw);
      }
      // let listener
      // 绘制开始事件
      proxy.iDraw.on(
        "drawstart",
        (evt) => {
          // console.log(evt)
          // console.log('--- start draw')  // 0603注释
        },
        this
      );
      // 绘制结束事件
      // proxy.iDraw.on('drawend',
      // function (evt) {
      proxy.iDraw.on(
        "drawend",
        (evt) => {
          console.log(proxy.iType)
          console.log("drawend");
          const iType = proxy.iType.substr(0, 4);
          const idStr = proxy.iType + "_" + new Date().valueOf();
          // console.log(iType, idStr)
          const iPlott = evt.feature;
          // iPlott.setId(idStr)
          // iPlott.set('type', 'POI')
          // iPlott.set('subclass', 'plott')
          // let iGeometry = iPlott.getGeometry()
          // let iGeoType = iGeometry.getType()
          // 处理基本图形数据
          if (
            iType === "Line" ||
            iType === "Squa" ||
            iType === "rect" ||
            iType === "Star" ||
            iType === "Circ" ||
            iType === "info" ||
            iType === "flag" ||
            iType === "tria" ||
            iType === "unio"
          ) {
            // let iPlott = evt.feature
            // let iGeometry = iPlott.getGeometry()
            // let iGeoType = iGeometry.getType()
            iPlott.set("gid", idStr);
            iPlott.set("type", "PLOT");
            // 设置样式
            // if (iType === 'flag') {
            //   iPlott.setStyle( new Style({
            //     fill: new Fill({ // ol.style.Fill
            //       color: 'rgba(255,255,255,1)'
            //     }),
            //     stroke: new Stroke({ // ol.style.Stroke
            //       color: proxy.currColor,
            //       width: proxy.strokeWidth
            //     })
            //   }))
            // } else {
            //   iPlott.setStyle( new Style({
            //     fill: new Fill({ // ol.style.Fill
            //       color: 'rgba(255,0,0,0)'
            //     }),
            //     stroke: new Stroke({ // ol.style.Stroke
            //       color: proxy.currColor,
            //       width: proxy.strokeWidth
            //     })
            //   }))
            // }
            iPlott.setStyle(
              new Style({
                fill: new Fill({
                  // ol.style.Fill
                  color: "rgba(255,0,0,0)",
                }),
                stroke: new Stroke({
                  // ol.style.Stroke
                  color: proxy.currColor,
                  width: proxy.strokeWidth,
                }),
              })
            );

            proxy.plottingLayer.getSource().addFeature(iPlott);
            // 设置图形样式信息--保存数据用！
            proxy.setCurrPlotStyle(
              "rgba(0,0,0,0)",
              proxy.currColor,
              proxy.strokeWidth
            );
            // if (iType === 'flag') {
            //   proxy.setCurrPlotStyle('rgba(255,255,255,1)',proxy.currColor,proxy.strokeWidth)
            // } else {
            //   proxy.setCurrPlotStyle('rgba(0,0,0,0)',proxy.currColor,proxy.strokeWidth)
            // }

            // console.log(proxy.currPlot)
            //   if (iGeoType === 'Polygon' || iGeoType === 'LineString') { // 多边形（方形，矩形，星形）
            //     iPlott.setStyle( new Style({
            //       fill: new Fill({ // ol.style.Fill
            //       color: 'rgba(255,0,0,0)'
            //     }),
            //     stroke: new Stroke({ // ol.style.Stroke
            //       color: proxy.currColor,
            //       width: 2
            //     })
            //   }))
            //   proxy.plottingLayer.getSource().addFeature(iPlott)
            //  } else if (iGeoType === 'LineString') { // 线

            //  } else if (iGeoType === 'Circle') { // 圆

            //  }
            const iGeometry = iPlott.getGeometry();
            const iGeoType = iGeometry.getType();
            if (iGeoType === "Polygon") {
              // console.log(proxy.iType)
              // console.log(iGeometry.getCoordinates())
              proxy.currPlot.id = idStr;
              proxy.currPlot.name = iGeoType; // 类型为多边形 还是iType？
              proxy.currPlot.cp = iGeometry.getCoordinates(); // ctrlpoint控制点，包含中心点
              proxy.currPlot.scale = 1;
              proxy.currPlot.rotate = 0;
              proxy.currPlot.color = proxy.currColor; // 颜色（样式需要更详细些，可能还会有虚线！）
              proxy.currPlot.unit = null; // 基础多边形不需要次属性
              proxy.currPlot.attach = null; // 关联文字数组！
              proxy.currPlot.boxWH = null; // polygon不需要此数据
            } else if (iGeoType === "LineString") {
              // console.log(proxy.iType)
              // console.log(iGeometry.getCoordinates()) // 返回的点即为控制点
              proxy.currPlot.id = idStr;
              proxy.currPlot.name = iGeoType; // 类型为多边形 还是iType？
              proxy.currPlot.cp = iGeometry.getCoordinates(); // ctrlpoint控制点，包含中心点
              proxy.currPlot.scale = 1;
              proxy.currPlot.rotate = 0;
              proxy.currPlot.color = proxy.currColor; // 颜色（样式需要更详细些，可能还会有虚线！）
              proxy.currPlot.unit = null; // 基础多边形不需要次属性
              proxy.currPlot.attach = null; // 关联文字数组！
              proxy.currPlot.boxWH = null; // LineStrion不需要此数据
            } else if (iGeoType === "Circle") {
              // console.log(proxy.iType)
              // console.log(iGeometry.getCenter())  // 圆心
              // console.log(iGeometry.getRadius())  // 半径
              const cp1 = iGeometry.getCenter();
              const r = iGeometry.getRadius();
              const cp2 = [cp1[0] + r, cp1[1]];
              // console.log(cp1, cp2)
              proxy.currPlot.id = idStr;
              proxy.currPlot.name = iGeoType; // 类型为多边形 还是iType？
              // 将圆的控制点2从保存半径，变成控制点2 （圆心x+加班经， 圆心y）
              // proxy.currPlot.cp = [iGeometry.getCenter(), [iGeometry.getRadius(), 0]] // iGeometry.getCoordinates() // ctrlpoint控制点，包含中心点
              proxy.currPlot.cp = [cp1, cp2];
              proxy.currPlot.scale = 1;
              proxy.currPlot.rotate = 0;
              proxy.currPlot.color = proxy.currColor; // 颜色（样式需要更详细些，可能还会有虚线！）
              proxy.currPlot.unit = null; // 基础多边形不需要次属性
              proxy.currPlot.attach = null; // 关联文字数组！
              proxy.currPlot.boxWH = null; // circle不需要此数据
              // console.log(proxy.currPlot)
            }
          } else if (iType === "dire") {
            // 军标SVG类型绘制 【iType === 'icon' || 此类型直接在点击时处理了，这里不再处理】
            // 将标绘图形加入标绘层
            // 设置军标的线宽
            // proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth)
            proxy.setSVGStyle(
              proxy.plot_geometries,
              proxy.strokeWidth,
              proxy.currColor
            );
            // 默认参数是this.plot_geometries
            proxy.geom2Featrue();
          } else if (iType === "ddir") {
            // 根据两个控制点，计算调用的svg文件
            // proxy.plot_geometries
            // console.log(proxy.currPlot)
            const cPnts = proxy.currPlot.cp;
            const dx = cPnts[1][0] - cPnts[0][0]; // 水平方向差值
            const dy = cPnts[1][1] - cPnts[0][1]; // 垂直方向差值
            const xTail = proxy.currPlot.name.substr(
              proxy.currPlot.name.length - 1,
              1
            );
            // console.log(xTail)
            if (dy >= 0) {
              // 保持当前的svg文件
              // 如果是b的要转成普通svg，然后调用绘制--改下
              if (xTail === "@") {
                proxy.currPlot.name = proxy.currPlot.name.substr(
                  0,
                  proxy.currPlot.name.length - 1
                );
                // console.log(proxy.currPlot)
                // proxy.loadData(proxy.currPlot)
                proxy.plot_geometries = proxy.createSVGPlot(proxy.currPlot); // 设置军标的线宽已放到此方法中
                // proxy.geom2Featrue(proxy.plot_geometries)
              } else {
                // console.log(proxy.currPlot)
                proxy.plot_geometries = proxy.createSVGPlot(proxy.currPlot); // setSVGStyle设置军标的线宽已放到此方法中
                // proxy.geom2Featrue()
              }
            } else {
              if (xTail === "@") {
                proxy.plot_geometries = proxy.createSVGPlot(proxy.currPlot); // 设置军标的线宽已放到此方法中
                // proxy.geom2Featrue(proxy.plot_geometries)
              } else {
                proxy.currPlot.name = proxy.currPlot.name + "@";
                // console.log(proxy.currPlot)
                proxy.plot_geometries = proxy.createSVGPlot(proxy.currPlot); // 设置军标的线宽已放到此方法中
                // proxy.geom2Featrue(proxy.plot_geometries)
              }
            }
          } else if (iType === "mult") {
            // 箭头类型
            // 箭头处理，和SVG方式应该一致
            // 需要补全图元缺失部分
            /* {
            gid：缺失
            type: v
            data: v
            style: 缺失
          } */
            // let gID = proxy.iType + String(new Date().getTime())
            const iStyle = {
              fill: "none", // proxy.currColor,
              stroke: proxy.currColor,
              width: proxy.strokeWidth, // 2
            };
            // // 实心箭头和虚线箭头样式设置（需要调整-见下面）
            // if (proxy.iType === 'mult_getSSArrowPnts' || proxy.iType === 'mult_dashArrowPnts') {
            //   iStyle.fill = proxy.currColor
            //   iStyle.width = 0
            // }
            // mult类型样式补全
            for (let i = 0; i < proxy.plot_geometries.geoData.length; i++) {
              // let iType = proxy.plot_geometries.geoData[i].type
              // proxy.plot_geometries.geoData[i].gid = gID  // 此处应该保持统一使用idStr-方法开始出给出
              proxy.plot_geometries.geoData[i].gid = idStr;
              // proxy.plot_geometries.geoData[i].style = iStyle
              proxy.plot_geometries.geoData[i].style = JSON.parse(
                JSON.stringify(iStyle)
              );
              // console.log(iStyle)
            }

            // 实心箭头和虚线箭头样式设置（需要调整-见下面）
            if (
              proxy.iType === "mult_getSSArrowPnts" ||
              proxy.iType === "mult_dashArrowPnts" ||
              proxy.iType === "mult_pathArrowPnts" ||
              proxy.iType === "mult_dashPathArrowPnts"
            ) {
              proxy.plot_geometries.geoData[0].style.fill = proxy.currColor;
              proxy.plot_geometries.geoData[0].style.width = 0;
            }

            // 新添加的带轮线（箭头要填充！）
            if (proxy.iType === "mult_getCyyLine") {
              // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
              proxy.plot_geometries.geoData[0].style.fill = proxy.currColor;
              proxy.plot_geometries.geoData[0].style.width = 0;
              proxy.plot_geometries.geoData[2].style.stroke = "#000000";
              proxy.plot_geometries.geoData[2].color = "#000000";
              // console.log(proxy.currPlot, proxy.currPlot.cp.length)
              if (proxy.currPlot.cp.length === 2) {
                const cp1 = proxy.currPlot.cp[0];
                const cp2 = proxy.currPlot.cp[1];
                const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2];
                proxy.currPlot.cp.splice(1, 0, midPnt);
              }
            }
            // 摩托化行进
            if (proxy.iType === "mult_getMotorLine") {
              // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
              proxy.plot_geometries.geoData[0].style.fill = proxy.currColor;
              proxy.plot_geometries.geoData[0].style.width = 0;
              // console.log(proxy.currPlot, proxy.currPlot.cp.length)
              if (proxy.currPlot.cp.length === 2) {
                const cp1 = proxy.currPlot.cp[0];
                const cp2 = proxy.currPlot.cp[1];
                const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2];
                proxy.currPlot.cp.splice(1, 0, midPnt);
              }
            }
            // 伴随线
            if (proxy.iType === "mult_getFollowLine") {
              // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
              proxy.plot_geometries.geoData[0].style.fill = proxy.currColor;
              proxy.plot_geometries.geoData[0].style.width = 0;
              proxy.plot_geometries.geoData[2].style.stroke = "#DEB887";
              // console.log(proxy.currPlot, proxy.currPlot.cp.length)
              if (proxy.currPlot.cp.length === 2) {
                const cp1 = proxy.currPlot.cp[0];
                const cp2 = proxy.currPlot.cp[1];
                const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2];
                proxy.currPlot.cp.splice(1, 0, midPnt);
              }
            }

            // 虚线的处理
            if (
              proxy.iType === "mult_dashArrowPnts" ||
              proxy.iType === "mult_dashPathArrowPnts"
            ) {
              proxy.plot_geometries.geoData[1].style.lineDash = [20, 10];
            }
            // } else {
            //   proxy.plot_geometries.geoData[1].style.lineDash = null
            // }
            // console.log(proxy.plot_geometries.geoData[1])

            // console.log(proxy.plot_geometries.geoData[0])
            // console.log(proxy.plot_geometries)
            // 将标绘图形加入标绘层
            proxy.geom2Featrue();
            // 当前会信息补全
            proxy.currPlot.id = idStr;
            proxy.currPlot.name = proxy.iType; // 类型为多边形 还是iType？
            // proxy.currPlot.cp = // ctrlpoint控制点，包含中心点 已经在绘制时更新
            proxy.currPlot.scale = 1;
            proxy.currPlot.rotate = 0;
            proxy.currPlot.color = proxy.currColor; // 颜色（样式需要更详细些，可能还会有虚线！）
            proxy.currPlot.unit = null; // 基础多边形不需要次属性
            proxy.currPlot.attach = null; // 关联文字数组！
            proxy.currPlot.boxWH = null; // mult不需要此数据
          } else if (iType === "text") {
            // 组id - 文字以text-开头； 军标内文字待定--应该是个控制点；gid和军标本身类型相同
            iPlott.set("gid", idStr);
            iPlott.set("type", "PLOT"); // 类型为标绘
            // 设置样式
            iPlott.setStyle(
              new Style({
                text: new Text({
                  // 位置
                  textAlign: "left", // 'left', 'right', 'center', 'end' or 'start'.
                  // 基准线
                  textBaseline: "middle", // 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
                  font: "normal 12px 微软雅黑",
                  text: "请添加文字",
                  fill: new Fill({
                    color: "#000000",
                  }),
                }),
              })
            );
            proxy.plottingLayer.getSource().addFeature(iPlott);
            // 设置图形样式信息--保存数据用！
            proxy.setCurrPlotStyle(
              "#000000",
              null,
              0,
              null,
              "请添加文字",
              "normal 12px 微软雅黑"
            );
            // setCurrPlotStyle (Fill = 'none', Stroke = null, Width = 0, LineDash = null, TEXT = null, Font = null)
            // 设置样式;参数 Fill填充色或文字颜色； Stroke边色； Width边框； LineDash虚线样式； TEXT文本内容； Font字体样式，如： ‘normal 12px 微软雅黑’

            // 设置要保存的信息
            const iGeometry = iPlott.getGeometry();
            // 需要获得文字的第二个控制点（new）
            const cp2WH = proxy.getTxtCPntAndWH(
              iGeometry.getCoordinates(),
              12,
              "请添加文字"
            ); // basePnt, fontSize, txt
            const iGeoType = iGeometry.getType();
            // console.log(iGeoType)
            if (iGeoType === "Point") {
              // console.log(proxy.iType)
              // console.log(iGeometry.getCoordinates())
              proxy.currPlot.id = idStr;
              proxy.currPlot.name = iGeoType; // 类型为多边形 还是iType？
              // proxy.currPlot.cp = iGeometry.getCoordinates() // ctrlpoint控制点，包含中心点
              // proxy.currPlot.cp = [iGeometry.getCoordinates()]
              proxy.currPlot.cp = cp2WH.cp;
              proxy.currPlot.boxWH = cp2WH.boxWH; // 用来保存文字像素尺寸
              proxy.currPlot.scale = 1;
              proxy.currPlot.rotate = 0;
              proxy.currPlot.color = proxy.currColor; // 颜色（样式需要更详细些，可能还会有虚线！）
              proxy.currPlot.unit = null; // 基础多边形不需要此属性
              proxy.currPlot.attach = null;
            }
            // console.log(proxy.currPlot)
          } else if (iType === "bbox") {
            // proxy.$parent.updateBBox()
            const iGeometry = iPlott.getGeometry();
            // let iGeoType = iGeometry.getType()
            // if (iGeoType === 'LineString') {}
            const cPnts = iGeometry.getCoordinates();
            // console.log(cPnts)
            proxy.$parent.updateBBox(cPnts);
          }
          // 标绘停止
          const sPlotType = proxy.iType; // 为事件发送
          proxy.endPlotting();
          // 添加用户和时间戳(改为调用方法)
          // proxy.currPlot['owner'] = proxy.iUser
          // proxy.currPlot['TS'] = new Date().getTime()
          proxy.currPlotAddUserTime(); // 添加用户和时间戳
          // console.log(proxy.currPlot)
          // 将当前绘制军标数据（currPlot）写入列表中！--> xData
          const dCache = JSON.parse(JSON.stringify(proxy.currPlot));
          proxy.xData.push(dCache);
          // 需要添加数据库方法！！
          // console.log(proxy.xData)
          // 发送事件，告知军标绘制完成
          proxy.$parent.emitFun("plotupdata", { act: "add", data: sPlotType });
        },
        this
      );
    },

    // 数据需要保存到数据库，记录信息添加了数据归属和时间戳，
    // 创建currPlotAddUserTime 修改updateTimestamp 删除"delPlot()"（删除军标按钮）面板中的确定 的地方需要添加此方法
    plotRecordUpdate(plotJson, updateType) {
      // console.log(plotJson, updateType)
      if (!plotJson) return;
      const oAction = {};
      const iType = updateType.toLowerCase();
      if (iType === "c") {
        // add
        oAction.action = "C";
        oAction.plot_id = proxy.plotFileID;
        oAction.element_id = plotJson.id;
        oAction.creator = proxy.iUser; // plotJson['owner'] // proxy.iUser
        oAction.ctime = plotJson.TS;
        oAction.modifier = proxy.iUser; // plotJson['owner'] // proxy.iUser
        oAction.mtime = plotJson.TS;
        oAction.content = JSON.parse(JSON.stringify(plotJson));
      } else if (iType === "u") {
        // update
        oAction.action = "U";
        oAction.plot_id = proxy.plotFileID;
        oAction.element_id = plotJson.id;
        oAction.creator = plotJson.owner;
        oAction.modifier = proxy.iUser; // plotJson['owner'] // proxy.iUser
        oAction.mtime = plotJson.TS;
        oAction.content = JSON.parse(JSON.stringify(plotJson));
      } else if (iType === "d") {
        // del
        oAction.action = "D"; // 如果一个军标创建后修改又删除了--如何处理，给数据库？
        oAction.plot_id = proxy.plotFileID;
        oAction.element_id = plotJson;
        oAction.modifier = proxy.iUser; // plotJson['owner'] // proxy.iUser
        oAction.mtime = new Date().getTime(); // plotJson['TS']
        oAction.content = JSON.parse(JSON.stringify(plotJson)); // 是个数组--包含删除的所有军标数据
      }
      
      // 把数据写入plotRecord[]  -- 数据载入时，将所有数据遍历，查看是否有对应军标，有的修改删除，没有的不处理（新建除外）
      // proxy.plotRecord[plotJson['id']] = oAction
      // if (proxy.plotRecord[plotJson['id']]) {
      if (proxy.plotRecord[oAction.element_id]) {
        oAction.createUser = proxy.plotRecord[oAction.element_id].createUser;
        oAction.createTime = proxy.plotRecord[oAction.element_id].createTime;
        proxy.plotRecord[oAction.element_id] = oAction;
      } else {
        proxy.plotRecord[oAction.element_id] = oAction;
      }
      if (proxy.recordLen >= Object.keys(proxy.plotRecord).length) {
        // 需要调用保存数据方法，将plotRecord数据写入数据库；这里没有plotID需要调用外部方法，完成后清除plotRecord数组
        proxy.savePlotData2DB();
        // proxy.stepCount += 1
        // if (proxy.stepCount >= proxy.fullUpdateStep) {
        //   proxy.loadPlotData(true) // true全量更新
        //   proxy.stepCount = 0
        // }
        //   } else if (proxy.syncPlot) {
        //     proxy.loadPlotData(false) // true全量更新
        //   }
        // }
      }
    },
    addPlotFileID(isRebuild = false) {
      // if (isRebuild) {
      //   proxy.plotFileID = 'PLOT_'  + proxy.iUser + String(new Date().getTime()).substr(0,10) //精确到秒
      // } else {
      //   if (proxy.plotFileID) {
      //     return
      //   } else {
      //     proxy.plotFileID = 'PLOT_'  + proxy.iUser + String(new Date().getTime()).substr(0,10) //精确到秒
      //   }
      // }
      proxy.plotFileID = "PLOT_" + String(new Date().getTime()).substr(0, 10); // 精确到秒
    },
    setPlotFileID(sPlotFileID) {
      // if (sPlotFileID = null) {
      //   proxy.plotFileID = 'PLOT_'  + proxy.iUser + String(new Date().getTime()).substr(0,10)
      // } else {
      //   proxy.plotFileID = sPlotFileID
      // }
      proxy.plotFileID = sPlotFileID;
    },
    getPlotFileID() {
      return proxy.plotFileID;
    },
    // 创建一个标会文件ID，可以提供id的制定时间
    createPlotFileID(idTime = null) {
      let newPlotFileID = null;
      if (idTime) {
        newPlotFileID = "PLOT_" + idTime;
      } else {
        newPlotFileID = "PLOT_" + String(new Date().getTime()).substr(0, 10);
      }
      return newPlotFileID;
    },
    // 添加用户和时间戳
    currPlotAddUserTime() {
      proxy.currPlot.owner = proxy.iUser;
      proxy.currPlot.TS = new Date().getTime();
      // 将数据写入plotRecord
      proxy.plotRecordUpdate(proxy.currPlot, "C");
      
    },
    // 更新时间戳
    updateTimestamp(idx) {
      proxy.xData[idx].TS = new Date().getTime();
      // 将数据写入plotRecord
      // proxy.plotRecordUpdate(proxy.xData[idx], 'U')
      
    },
    getPlotBaseInfo() {
      const baseInfo = {
        fileID: proxy.plotFileID,
        unit: proxy.getUnit(),
        strokeWidth: proxy.getStrokeWidth(),
        user: proxy.iUser,
        rcs: proxy.$parent.conf.RCS,
      };
      return baseInfo;
    },
    // 绘制double-direct的右向svg（暂时不使用）
    async drawDDirect(plotID) {
      proxy.$refs.pVec.clearPlotData();
      proxy.getPlotData(plotID); // 调用自己的加载数据方法，使用vec的get-PlotDataEx方法
      await proxy.sleep(200);
      proxy.$refs.pVec.createSVGPlot(proxy.currPlot);
    },

    /**
     * Method：startPlotting
     * 开始标绘工作，创建环境
     */
    startPlotting(parentMap) {
      
      // 初始化军标绘制功能
      proxy.initPlottingLayer(parentMap);
      proxy.openPlotPanel(); // 在plotPanel.js中
      // proxy.addPlotFileID()
      
    },
    // 唤醒（暂未使用）
    awakenPlotting() {
      if (proxy.iType) {
        proxy.iMap.removeInteraction(proxy.iDraw);
        proxy.addInteraction();
      } else {
        proxy.iMap.removeInteraction(proxy.iDraw);
      }
    },

    /**
     * Method：stopMeasure
     * 停止军标绘制(保留绘制的数据) ! 缺一个启动绘制
     */
    stopPlotting() {
      // console.log('退出标绘')
      if (proxy.iDraw) {
        proxy.iMap.removeInteraction(proxy.iDraw); // 关闭移除绘画交互层
      }
      proxy.clearCtrlPoint(); // 清空控制点
      // if (proxy.plottingLayer) {
      //   proxy.plottingLayer.getSource().clear() // 删除绘制内容
      //   proxy.iMap.removeLayer(proxy.plottingLayer) // 删除框选层
      // }
      proxy.$parent.iAction = null;
      // proxy.setShowFlag(false)
      proxy.closePlotPanel();
    },
    clearPlotLayer() {
      // 清空并删除标绘层
      proxy.stopPlotting(); // 停止标绘
      if (proxy.plottingLayer) {
        // 清空并删除图层
        proxy.plottingLayer.getSource().clear(); // 删除绘制内容
        proxy.iMap.removeLayer(proxy.plottingLayer); // 删除框选层
      }
    },
    erasePlotData() {
      proxy.plottingLayer.getSource().clear(); // 删除绘制内容
    },
    /*
     * 开始本次军标绘制-选择军标类型开始绘制
     */
    beginPlotting(plotID) {
      proxy.clearCtrlPoint();
      proxy.iType = plotID;
      proxy.iTypeWatch();
    },
    // 结束本次军标绘制，等待新的开始
    endPlotting() {
      proxy.iType = null;
      proxy.iTypeWatch();
    },

    /*
     * parseGeometry
     * 生成绘制方法所需的geometry数据;drawend生成GeometryCollection对象使用！
     * 参数cData(coordinate point data)通过绘制方法生成的点数据, 如：{geoType:整体类型，geoData[{gid:123,type:LineSting,data[],style:{}},...]}
     * 返回：geometries数组，每个元素是一个geometry对象（线，面等），如：[polygon,linestring,...]
     */
    parseGeometry(cData) {
      // console.log(cData)
      // let iType = null
      let geometry = null;
      const geometries = []; // 保存每个绘制图形的对象
      if (cData.geoType === "GeometryCollection") {
        // console.log(cData.geoData.length)
        for (let i = 0; i < cData.geoData.length; i++) {
          const iType = cData.geoData[i].type;
          // 获取返回结果查看是否有属性
          // let iProperties = cData.geoData[i].properties
          let iStyle = cData.geoData[i].style;
          // console.log(iStyle)
          if (!iStyle) {
            iStyle = {
              fill: null,
              stroke: proxy.currColor,
              width: "2px",
            };
          }
          // 根据类型设置数据（目前只有Polygon，LineString，Text）
          // console.log(iType)
          switch (iType.toLowerCase()) {
            case "linestring": // LineString
              // if (cData.geoData[i].data.length < 2) return
              // console.log(cData.geoData[i])
              geometry = new LineString(cData.geoData[i].data);
              // 设置不同的样式
              // console.log(geometry)
              // geometry.setProperties( {stroke: proxy.currColor})
              // geometry.setProperties( {width: '3px'})
              // geometry.setStyle(new Style({  // ol.style.Style
              //   stroke: new Stroke({ // ol.style.Stroke
              //     color: '#0000FF',
              //     width: 2
              //   })
              // })) // 添加样式
              // console.log(geometry)
              geometries.push(geometry);
              break;
            case "polygon": // Polygon
              geometry = new Polygon(cData.geoData[i].data);
              // geometry.setProperties( {fill: proxy.currColor})
              // geometry.setProperties( {stroke: proxy.currColor})
              // geometry.setProperties( {width: '0'})
              geometries.push(geometry);
              // console.log(geometry.getProperties())
              break;
            case "circle":
              // console.log('CIRCLE')
              // console.log(cData.geoData[i])
              const cp1 = cData.geoData[i].data[0];
              const cp2 = cData.geoData[i].data[1];
              // 求两个点的距离(半径)--可能需要进行坐标转换，转换到3857，计算长度。（坐标转换）
              const r = plot.CalLengthOfTwoPoints(cp1, cp2);
              geometry = new geoCircle(cp1, r);
              // geometry.setProperties( {fill: proxy.currColor})
              // geometry.setProperties( {stroke: proxy.currColor})
              // geometry.setProperties( {width: '0'})
              geometries.push(geometry);
              break;
            // case 'multilinestring':  // MultiLineString
            //   geometry = new MultiLineString(newCoordinates)
            //   geometries.push(geometry)
            //   break
            // case 'multipolygon':  // MultiPolygon
            //   geometry = new MultiPolygon(newCoordinates)
            //   geometries.push(geometry)
            //   break
            // case 'point':  // Point
            //   geometry = new Point(newCoordinates)
            //   geometries.push(geometry)
            //   break
            default:
          } // end switch
        } // end for
        // console.log(geometries)
        return geometries;
      } else {
        console.log("123");
      }
    },

    /*
     * createBasePlot
     * 根据xData元素数据生成相应的军标
     * 参数plotData：当前修改的军标数据
     */
    createBasePlot(plotData = proxy.alterPlot, sSRS = "EPSG:3857") {
      const sRCS = proxy.$parent.conf.RCS; // 地图的坐标系名称{String}
      let iGeom = null;
      let iFeature = null;
      let iStyle = null;
      const iType = plotData.name.toLowerCase();
      let iPolyData = [];
      // console.log(plotData)
      // console.log(iType)
      switch (iType) {
        case "linestring":
          // 绘制线
          iGeom = new LineString(plotData.cp); // 生成线所需点！
          // 坐标转换为了china2000
          // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
          //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
          // }
          iFeature = new Feature(iGeom); // 生成feature
          // 需要添加控制点属性--待添加
          iFeature.set("gid", plotData.id);
          iFeature.set("type", "PLOT");
          // 获取样式
          iStyle = plotData.style;
          // 设置样式
          iFeature.setStyle(
            new Style({
              fill: new Fill({
                // ol.style.Fill
                color: iStyle.fill,
              }),
              stroke: new Stroke({
                // ol.style.Stroke
                color: iStyle.stroke,
                // width: iStyle.width,
                width: proxy.strokeWidth,
                lineDash: iStyle.lineDash,
              }),
            })
          );
          // 将绘制的军标加入军标层
          proxy.plottingLayer.getSource().addFeature(iFeature);
          break;
        case "polygon":
          // iPolyData = plotData.cp  // 将军表数据复制为多边形数据
          iPolyData = JSON.parse(JSON.stringify(plotData.cp));
          // if (iPolyData.length > 0) {
          //   iPolyData[0].push(iPolyData[0][0]) // 下面一行的替换--封口点
          // }
          // -- iPolyData[0].push(iPolyData[0]) // 创建控制点时，多边形删除了一个封口点；这里需要添加上（与首个点一致）
          if (iPolyData[0].length < 3) return;
          // 绘制多边形
          // console.log(plotData.cp, iPolyData)
          iGeom = new Polygon(iPolyData); // 生成线所需点！
          // 坐标转换为了china2000
          // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
          //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
          // }
          iFeature = new Feature(iGeom); // 生成feature
          // 需要添加控制点属性--待添加
          // iFeature.setProperties({gid:gID})
          iFeature.set("gid", plotData.id);
          iFeature.set("type", "PLOT");
          // 获取样式
          iStyle = plotData.style;
          // 设置样式
          iFeature.setStyle(
            new Style({
              fill: new Fill({
                // ol.style.Fill
                color: iStyle.fill,
              }),
              stroke: new Stroke({
                // ol.style.Stroke
                color: iStyle.stroke,
                // width: iStyle.width,
                width: proxy.strokeWidth,
                lineDash: iStyle.lineDash,
              }),
            })
          );
          // 将绘制的军标加入军标层
          proxy.plottingLayer.getSource().addFeature(iFeature);
          break;
        case "circle":
          // 获得两个控制点
          const cp1 = plotData.cp[0];
          const cp2 = plotData.cp[1];
          // 求两个点的距离(半径)--可能需要进行坐标转换，转换到3857，计算长度。（坐标转换）
          const r = plot.CalLengthOfTwoPoints(cp1, cp2);
          // 绘制圆--new Circle(center, opt_radius)
          iGeom = new geoCircle(cp1, r); // 生成圆
          // 坐标转换为了china2000
          // if (sSRS !== sRCS) { // 数据坐标 != 地图坐标，将数据坐标转地图坐标
          //   iGeom.applyTransform(olProj.getTransform(sSRS, sRCS))
          // }
          iFeature = new Feature(iGeom); // 生成feature
          // 需要添加控制点属性--待添加
          // iFeature.setProperties({gid:gID})
          iFeature.set("gid", plotData.id);
          iFeature.set("type", "PLOT");
          // 获取样式
          iStyle = plotData.style;
          // 设置样式
          iFeature.setStyle(
            new Style({
              fill: new Fill({
                // ol.style.Fill
                color: iStyle.fill,
              }),
              stroke: new Stroke({
                // ol.style.Stroke
                color: iStyle.stroke,
                // width: iStyle.width,
                width: proxy.strokeWidth,
                lineDash: iStyle.lineDash,
              }),
            })
          );
          // 将绘制的军标加入军标层
          proxy.plottingLayer.getSource().addFeature(iFeature);
          break;
        default:
      }
    },

    // 获得文字BoxWH的缩放因子
    getTxtBoxScale(ctrlPnts, boxWH) {
      if (ctrlPnts.length < 2) return 1;
      const scp1 = proxy.iMap.getPixelFromCoordinate(ctrlPnts[0]);
      const scp2 = proxy.iMap.getPixelFromCoordinate(ctrlPnts[1]);
      const width = Math.abs(scp1[0] - scp2[0]);
      const height = Math.abs(scp1[1] - scp2[1]);
      const scaleX = width / boxWH.w;
      const scaleY = height / boxWH.h / 4; // 文字的首个点时靠左居中！高度是一半
      // console.log(scaleX, scaleY)
      // 返回一个比较大的比率因子
      return scaleX > scaleY ? scaleX : scaleY;
    },

    // 只根据x轴变化进行缩放
    getTxtBoxScaleX(ctrlPnts, boxWH) {
      if (ctrlPnts.length < 2) return 1;
      const scp1 = proxy.iMap.getPixelFromCoordinate(ctrlPnts[0]);
      const scp2 = proxy.iMap.getPixelFromCoordinate(ctrlPnts[1]);
      const width = Math.abs(scp1[0] - scp2[0]);
      const height = Math.abs(scp1[1] - scp2[1]);
      const scaleX = width / boxWH.w;
      const scaleY = height / boxWH.h;
      // 返回一个比较大的比率因子
      // return scaleX > scaleY ? scaleX : scaleY
      // console.log(width)
      return scaleX;
    },
    // 获得文字的旋转因子
    getTxtBoxRotate(ctrlPnts) {
      if (ctrlPnts.length < 2) return 0;
      // let scp1 = proxy.iMap.getPixelFromCoordinate(ctrlPnts[0])
      // let scp2 = proxy.iMap.getPixelFromCoordinate(ctrlPnts[1])
      // 旋转
      const x1 = ctrlPnts[0][0]; // .x
      const y1 = ctrlPnts[0][1]; // .y
      const x2 = ctrlPnts[1][0]; // .x
      const y2 = ctrlPnts[1][1]; // .y
      // let rotate = Math.atan2((y2 - y1), (x2 - x1)) + Math.PI / 2
      const rotate = Math.atan2(y2 - y1, x2 - x1);
      return -rotate;
    },
    // 创建文字
    createTxtPlot(plotData = proxy.alterPlot) {
      if (!plotData) return;
      // console.log(plotData)
      let iGeom = null;
      let iFeature = null;
      let iStyle = null;
      const iType = plotData.name.toLowerCase();
      // console.log(iType)
      // 绘制点point
      // iGeom = new Point(plotData.cp) // 文字有第二个控制点了
      iGeom = new Point(plotData.cp[0]); // 文字所需的控制点
      iFeature = new Feature(iGeom); // 生成feature
      // 需要添加控制点属性--待添加
      iFeature.set("gid", plotData.id);
      iFeature.set("type", "PLOT");
      // 获取样式
      iStyle = plotData.style;
      // console.log(iStyle)
      // 文字特殊字符处理-回复\n
      // console.log(iStyle.text)
      // 回车\\\\n为json调入后会变成\\n(在保存那里统一处理)
      // let iText = iStyle.text.replace(/\\n/g, '\n')
      // 获取文字缩放因子
      const iScale = proxy.getTxtBoxScale(plotData.cp, plotData.boxWH);
      // 获取文字的旋转因子
      const iRotate = proxy.getTxtBoxRotate(plotData.cp);
      // 设置样式
      iFeature.setStyle(
        new Style({
          // 创建文字样式
          text: new Text({
            // 位置
            textAlign: "left", // 'left', 'right', 'center', 'end' or 'start'.
            // 基准线
            textBaseline: "middle", // 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
            font: iStyle.font,
            text: iStyle.text,
            scale: iScale,
            rotation: iRotate,
            // width: iStyle.width,
            fill: new Fill({
              color: iStyle.fill,
            }),
          }),
        })
      );
      // 将绘制的军标加入军标层
      proxy.plottingLayer.getSource().addFeature(iFeature);
    },
    // 创建SVG军标
    async createSVGPlot(plotData = proxy.alterPlot) {
      // console.log(plotData)
      // 首先根据军标名称调用对应的SVG
      // let plotID = plotData.name
      // 如果SVG没有变更不需要重新调入
      // console.log(proxy.iType, plotData.name)
      // console.log(proxy.$parent.iActType, plotData.name)
      // if (proxy.iType !== plotData.name) { // 上次所选择的军标和本次不同
      if (proxy.iType !== plotData.name) {
        // if (proxy.$parent.iActType !== plotData.name) {
        // 调用军标绘制所需要的SVG -- 可能需要延时处理
        proxy.getPlotData(plotData.name); // 调用自己的加载数据方法，使用vec的get-PlotDataEx方法
        await proxy.sleep(200); // 不添加等待会有闪烁（切换）
      }
      if (plotData.name.substr(0, 4) === "ddir") {
        // console.log('*****************************:', plotData.name)
        proxy.getPlotData(plotData.name); // 调用自己的加载数据方法，使用vec的get-PlotDataEx方法
        await proxy.sleep(200); // 不添加等待会有闪烁（切换）
      }
      // proxy.$refs.pVec.clearPlotData()
      // // 调用军标绘制所需要的SVG -- 可能需要延时处理sleep
      // proxy.getPlotData(plotData.name)
      // await proxy.sleep(50)
      // 需要更新旋转和缩放因子--注意CardMap中已经更新；控制点需要使用屏幕坐标
      proxy.plot_geometries = proxy.$refs.pVec.createSVGPlot(plotData);
      // let geometryList = proxy.parseGeometry(newCoordinates)
      // proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth)
      proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth, plotData.color);
      // console.log(proxy.plot_geometries)
      proxy.geom2Featrue(proxy.plot_geometries);
    },
    // 创建箭头军标console.log(iType)
    createPlot(plotData = proxy.alterPlot) {
      // console.log(plotData)
      // 绘制方向自由变化军标；如：箭头
      let iMaxPoints = null;
      // 调用getFeature方法，分析svg和生成数据
      let funName = plotData.name.split("_")[1];
      // 获取绘制点数_名称最后一位
      const maxPnt = funName.substr(funName.length - 1, 1);
      // 最后一位为数字，需要设置绘制控制点数量，修改方法名称
      if (!isNaN(maxPnt)) {
        iMaxPoints = parseInt(maxPnt);
        funName = funName.substr(0, funName.length - 1);
      }
      // console.log(funName)
      if (!funName) return;
      // 查看方法是否存在，不存在退出！
      const func = plot.getFunc(funName);
      // 方法不存在退出绘制！
      if (!func) return;
      // 查看控制点数是否满足绘制要求
      if (iMaxPoints) {
        // 是否有绘制控制点的数量要求
        if (plotData.cp.length !== iMaxPoints) return;
      }
      proxy.plot_geometries = func(plotData.cp);
      // 设置样式添加到军标层
      const gID = plotData.id;
      const iStyle = {
        fill: "none", // proxy.currColor,
        stroke: plotData.color,
        width: proxy.strokeWidth,
      };
      // console.log(proxy.iType)
      // if (plotData.name === 'mult_getSSArrowPnts' || plotData.name === 'mult_dashArrowPnts') {
      //   iStyle.fill = plotData.color
      //   iStyle.width = 0
      // }
      for (let i = 0; i < proxy.plot_geometries.geoData.length; i++) {
        // let iType = proxy.plot_geometries.geoData[i].type
        proxy.plot_geometries.geoData[i].gid = gID;
        // proxy.plot_geometries.geoData[i].style = iStyle
        proxy.plot_geometries.geoData[i].style = JSON.parse(
          JSON.stringify(iStyle)
        );
      }
      // 实心箭头和虚线箭头样式设置（需要调整-见下面）
      if (
        plotData.name === "mult_getSSArrowPnts" ||
        plotData.name === "mult_dashArrowPnts" ||
        plotData.name === "mult_pathArrowPnts" ||
        plotData.name === "mult_dashPathArrowPnts"
      ) {
        proxy.plot_geometries.geoData[0].style.fill = plotData.color;
        proxy.plot_geometries.geoData[0].style.width = 0;
      }
      // 新添加的带轮线（箭头要填充！）
      if (plotData.name === "mult_getCyyLine") {
        // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
        proxy.plot_geometries.geoData[0].style.fill = plotData.color;
        proxy.plot_geometries.geoData[0].style.width = 0;
        proxy.plot_geometries.geoData[2].style.stroke = "#000000";
        // proxy.plot_geometries.geoData[2].color = '#000000'
        // console.log(proxy.currPlot, proxy.currPlot.cp.length)
        if (proxy.currPlot.cp.length === 2) {
          const cp1 = proxy.currPlot.cp[0];
          const cp2 = proxy.currPlot.cp[1];
          const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2];
          proxy.currPlot.cp.splice(1, 0, midPnt);
        }
      }
      // 摩托化行进
      if (plotData.name === "mult_getMotorLine") {
        // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
        proxy.plot_geometries.geoData[0].style.fill = plotData.color; // proxy.currColor
        proxy.plot_geometries.geoData[0].style.width = 0;
        // console.log(proxy.currPlot, proxy.currPlot.cp.length)
        if (proxy.currPlot.cp.length === 2) {
          const cp1 = proxy.currPlot.cp[0];
          const cp2 = proxy.currPlot.cp[1];
          const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2];
          proxy.currPlot.cp.splice(1, 0, midPnt);
        }
      }
      // 伴随线
      if (plotData.name === "mult_getFollowLine") {
        // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
        proxy.plot_geometries.geoData[0].style.fill = plotData.color; // proxy.currColor
        proxy.plot_geometries.geoData[0].style.width = 0;
        proxy.plot_geometries.geoData[2].style.stroke = "#DEB887";
        // console.log(proxy.currPlot, proxy.currPlot.cp.length)
        if (proxy.currPlot.cp.length === 2) {
          const cp1 = proxy.currPlot.cp[0];
          const cp2 = proxy.currPlot.cp[1];
          const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2];
          proxy.currPlot.cp.splice(1, 0, midPnt);
        }
      }
      // 虚线的处理
      if (
        plotData.name === "mult_dashArrowPnts" ||
        plotData.name === "mult_dashPathArrowPnts"
      ) {
        proxy.plot_geometries.geoData[1].style.lineDash = [20, 10];
      }
      // } else {
      //  proxy.plot_geometries.geoData[1].style.lineDash = null
      // }
      // console.log(proxy.plot_geometries)
      // 将标绘图形加入标绘层
      proxy.geom2Featrue();
    },

    // 获取军标数据;根据军标ID从xData提取数据到currPlot中
    xData2currPlotByID(plotID) {
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          // proxy.currPlot = proxy.xData[i] // JSON复制方式？
          proxy.currPlot = JSON.parse(JSON.stringify(proxy.xData[i]));
          break;
        }
      }
    },
    // 获取关联文字数组
    getPlotAttach(plotID) {
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i].attach)
          if (proxy.xData[i].attach) {
            return proxy.xData[i].attach;
          } else {
            return null;
          }
        }
      }
    },
    // 删除指定军标中的指定关联文字（只删除了xData）
    delAttachByID(plotID, txtID) {
      // console.log(plotID, txtID)
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          // 找到对应的军标
          // console.log(proxy.xData[i].attach)
          if (proxy.xData[i].attach) {
            // 如果有attach
            // console.log(proxy.xData[i].attach.length)
            for (let j = 0; j < proxy.xData[i].attach.length; j++) {
              // console.log(proxy.xData[i].attach[j],txtID)
              if (proxy.xData[i].attach[j] === txtID) {
                proxy.xData[i].attach.splice(j, 1); // 删除军标关联的文字id
                // 如果attach已经空设置其为null
                if (proxy.xData[i].attach.lenght === 0)
                  proxy.xData[i].attach = null;
                break;
              }
            }
          } else {
            return null;
          }
          break; // 退出xData循环查找指定军标（已经找到处理完成）
        }
      }
    },

    // 获取军标数据从xData中；
    getPlotFromXData(plotID) {
      let iPlot = null;
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          iPlot = proxy.xData[i];
          break;
        }
      }
      return iPlot;
    },
    // 找到指定军标ID的控制点数据 从xData中, 原来在图层变更时使用--现在被下面的方法替换（暂时未使用）
    getCtrlPntsByID(plotID) {
      let ctrlPnts = null;
      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          ctrlPnts = proxy.xData[i].cp;
          break;
        }
      }
      return ctrlPnts;
    },
    // 名称：getCPntsPosByID  替换上面的getCtrlPntsByID
    // 找到指定军标ID的控制点数据 和 中心点坐标 ，从xData中
    // 参数：plotID-军标ID
    // 返回：对象{ctrPnts: ctrlPnts, basePnt: basePnt}
    getCPntsPosByID(plotID) {
      const chkArr = ["CP", "TL", "TM", "TR", "LM", "RM", "BL", "BM", "BR"]; // 校验数据；验证basePoint是否有效
      let ctrlPnts = null;
      let basePnt = "CP";
      let plotName = null;
      for (let i = 0; i < proxy.xData.length; i++) {
        // console.log(proxy.xData[i], plotID)
        if (proxy.xData[i].id === plotID) {
          // console.log(proxy.xData[i], plotID)
          ctrlPnts = proxy.xData[i].cp;
          plotName = proxy.xData[i].name;
          break;
        }
      }
      // xPart数组，保存plotName的组成分片icon_br_dun等
      if (!plotName) return;
      const xPart = plotName.split("_");
      if (xPart.length > 1) {
        basePnt = xPart[1].toUpperCase();
        // basePoint校验
        if (chkArr.indexOf(basePnt) === -1) {
          basePnt = "CP";
        }
      } else {
        basePnt = "CP";
      }
      // console.log(ctrlPnts, basePnt)
      return { ctrPnts: ctrlPnts, basePnt: basePnt };
    },
    // 名称：getCPntsPosByID  替换上面的getCtrlPntsByID
    // 找到指定军标ID的控制点数据 和 中心点坐标 ，从xData中
    // 参数：plotID-军标ID
    // 返回：对象{ctrPnts: ctrlPnts, basePnt: basePnt}
    getTxtCtrlPnt(txtID) {
      let txtPlot = null;

      for (let i = 0; i < proxy.xData.length; i++) {
        if (proxy.xData[i].id === txtID) {
          // console.log(proxy.xData[i], txtID)
          txtPlot = proxy.xData[i];
          break;
        }
      }
      // console.log(txtID)
      // console.log(proxy.xData[0])
      // console.log(proxy.xData.length)
      // console.log(txtPlot)
      // 保存文字的像素大小
      const xFont = txtPlot.style.font.split(" ")[1];
      let txtSize = xFont.substr(xFont, xFont.length - 2);
      // 将文本分解成数组，以便获取最长行文字数量
      const txtArr = txtPlot.style.text.split(/[(\r\n)\r\n]+/);
      // console.log(txtSize)
      if (!isNaN(txtSize) && parseInt(txtSize) > 0) {
        txtSize = parseInt(txtSize);
      } else {
        txtSize = 12;
      }
      const numLine = txtArr.length; // 行数量
      let maxLen = 0;
      for (let i = 0; i < numLine; i++) {
        if (maxLen < txtArr[i].length) {
          maxLen = txtArr[i].length;
        }
      }
      // 字的尺寸 * 字数量 = 一行所占的像素数量
      // console.log(txtSize * maxLen)
      const w = txtSize * maxLen;
      // 行的高度 * 行数量 / 2 (左下坐标是行高一半)
      // console.log(txtSize * numLine / 2)
      const h = ((txtSize + txtSize * 0.5) * numLine) / 2;
      const cp = txtPlot.cp;
      // console.log(cp)
      const screenCoord = proxy.iMap.getPixelFromCoordinate(cp[0]);
      // console.log(screenCoord, h)
      const screenCoord2 = [screenCoord[0] + w, screenCoord[1] - h]; // 屏幕坐标左上角是原点
      // console.log(screenCoord2)
      const cp2 = proxy.iMap.getCoordinateFromPixel(screenCoord2);
      // console.log(cp2)
      // proxy.addPoint('txtCp2', cp2)
    },
    // getTxtCPntAndWH 获得文字控制点2和文字块的宽高
    // basePnt:控制点, fontSize：文字尺寸（不带PX后缀）, txt：文本内容
    getTxtCPntAndWH(basePnt, fontSize, txt) {
      let txtSize = fontSize;
      let tail = null;
      // 如果txtSize长度大于2，验证是否带px后缀
      if (txtSize.length > 2) {
        tail = fontSize.substring(fontSize.length - 2);
      }
      // 如果文字尺寸带px
      if (tail && tail.toLowerCase() === "px") {
        txtSize = fontSize.substr(fontSize, fontSize.length - 2);
        if (!isNaN(txtSize) && parseInt(txtSize) > 0) {
          txtSize = parseInt(txtSize);
        } else {
          txtSize = 12;
        }
      } else {
        // 不带后缀，设置文字尺寸
        if (!isNaN(txtSize) && parseInt(txtSize) > 0) {
          txtSize = parseInt(txtSize);
        } else {
          txtSize = 12;
        }
      }
      // 将文本分解成数组，以便获取最长行文字数量
      const txtArr = txt.split(/[(\r\n)\r\n]+/);
      const numLine = txtArr.length; // 行数量
      let maxLen = 0;
      for (let i = 0; i < numLine; i++) {
        if (maxLen < txtArr[i].length) {
          maxLen = txtArr[i].length;
        }
      }
      // 字的尺寸 * 字数量 = 一行所占的像素数量
      const w = txtSize * maxLen;
      // 行的高度 * 行数量 / 2 (左下坐标是行高一半)
      const h = ((txtSize + txtSize * 0.5) * numLine) / 2;
      // 中心点（控制点1）
      // console.log(basePnt)
      const screenCoord = proxy.iMap.getPixelFromCoordinate(basePnt);
      // console.log(screenCoord, h)
      const screenCoord2 = [screenCoord[0] + w, screenCoord[1] - h]; // 屏幕坐标左上角是原点
      // console.log(screenCoord2)
      const cp2 = proxy.iMap.getCoordinateFromPixel(screenCoord2); // 计算得到控制点2
      return { cp: [basePnt, cp2], boxWH: { w: w, h: h } };
    },

    // 添加旗帜方法(根据旗帜类型添加不同旗帜--待定)
    addFlag(plotID = null, flagType = "rect") {
      if (!plotID) {
        plotID = document.getElementById("plotid").value;
        if (!plotID) return;
      }
      // console.log(plotID)
      const plotData = proxy.getPlotFromXData(plotID);
      let iUnit = plotData.unit;
      const cPnts = plotData.cp[0];
      let iBox = plotData.boxWH;
      if (!iUnit) {
        const cp1 = cPnts[0];
        const cp2 = cPnts[1];
        const xDist = Math.abs(cp2[0] - cp1[0]);
        const yDist = Math.abs(cp2[1] - cp1[1]);
        const d = xDist > yDist ? xDist : yDist;
        iUnit = [d / 5, 1];
        iBox = [cPnts.length - 1];
      }
      let idx = iUnit[1]; // 新添加的旗帜-索引，以前一旗帜的左上角为起点
      const d = iUnit[0];
      // console.log(idx, d)
      // 首个点为cPnts[idx]
      // let p2 = [cPnts[idx][0], cPnts[idx][1] + d * 3]
      // let p3 = [cPnts[idx][0] + d * 4, cPnts[idx][1] + d * 3]
      // let p4 = [cPnts[idx][0] + d * 4, cPnts[idx][1] + d]
      // let p5 = [cPnts[idx][0], cPnts[idx][1] + d]
      const p2 = [cPnts[idx][0], cPnts[idx][1] + d * 2.5];
      const p3 = [cPnts[idx][0] + d * 5, cPnts[idx][1] + d * 2.5];
      const p4 = [cPnts[idx][0] + d * 5, cPnts[idx][1] + d / 2];
      const p5 = [cPnts[idx][0], cPnts[idx][1] + d / 2];
      const p6 = cPnts[idx];
      idx++; // 旗帜数据添加1，将数据写到插入到数据指定位置。idx为开始位置-包含此位置
      cPnts.splice(idx, 0, p2, p3, p4, p5, p6);
      iBox.push(5); // 上面生成了5个新的点
      iUnit[1] = idx; // iUnit[1] + 1 // 添加了一个旗帜 [0单元格尺寸，1旗帜数量]
      plotData.cp = [cPnts];
      plotData.boxWH = iBox; // 每个旗帜的等点数[6,5,...] 删除时需要
      plotData.unit = iUnit;
      // 将数据写回xData（删除原有的）
      proxy.updatePlot(plotID, plotData);
      // 生成新的feature（删除原有的feature）
      proxy.clearCtrlPoint();
      proxy.clearPlotByGID(plotID);
      proxy.createBasePlot(plotData);
      proxy.getPlotDataByID(null, null); // 清空控制面板
      proxy.$parent.iSelPlotID = null;
      proxy.plotRecordUpdate(plotData, "U");
    },
    // 删除旗帜
    delFlag(plotID = null) {
      if (!plotID) {
        plotID = document.getElementById("plotid").value;
        if (!plotID) return;
      }
      const plotData = proxy.getPlotFromXData(plotID);
      if (!plotData.unit) return; // 不能删除唯一的旗帜（未进行过添加时，unit为空）
      let idx = plotData.unit[1]; // 获得旗帜总数 [0单元格尺寸，1旗帜数量]
      if (idx === 1) return; // 不能删除唯一的旗帜（添加过旗帜，首个旗帜为1）
      const cPnts = plotData.cp[0];
      const iNum = plotData.boxWH.pop(); // [6,5,...] 获得最后一旗帜点数量
      // console.log(cPnts)
      cPnts.splice(idx, iNum);
      idx--;
      plotData.unit[1] = idx; // 减少了一个旗帜 [0：单元格尺寸，1：旗帜数量]
      plotData.cp = [cPnts];
      // plotData.boxWH.pop() 旗帜点数pop删除
      // 将数据写回xData（删除原有的）
      proxy.updatePlot(plotID, plotData);
      // 生成新的feature（删除原有的feature）
      proxy.clearCtrlPoint();
      proxy.clearPlotByGID(plotID);
      proxy.createBasePlot(plotData);
      proxy.getPlotDataByID(null, null); // 清空控制面板
      proxy.$parent.iSelPlotID = null;
      proxy.plotRecordUpdate(plotData, "U");
    },
    // 设置svg军标样式（主要是调整军标的线宽）
    // 参数：iPlotParts组成军标的数据 {geoType:xxx,geoData[{gid,type,data,style}...]}; iStroke:线宽
    setSVGStyle_0ld(iPlotParts, StrokeW) {
      // console.log(iPlotParts)
      const len = iPlotParts.geoData.length;
      let maxWidth = 0;
      // 循环每个组成部件，查找最大线宽度值；point类型排除在外
      for (let i = 0; i < len; i++) {
        const xPart = iPlotParts.geoData[i];
        if (xPart.type.toLowerCase() !== "point") {
          const w = xPart.style.width;
          if (w) {
            if (w > maxWidth) {
              maxWidth = w;
            }
          }
        }
      } // 查找最大线宽度值-结束
      // console.log(maxWidth)
      for (let i = 0; i < len; i++) {
        const xPart = iPlotParts.geoData[i];
        if (xPart.type.toLowerCase() !== "point") {
          const w = xPart.style.width;
          if (w) {
            // 如果w非null
            // console.log(w === maxWidth)
            if (w === maxWidth) {
              // console.log('设置最大宽度')
              // iPlotParts.geoData[i].style.width = StrokeW
              proxy.plot_geometries.geoData[i].style.width = StrokeW;
            } else {
              // console.log(w / maxWidth * StrokeW)
              proxy.plot_geometries.geoData[i].style.width =
                (w / maxWidth) * StrokeW;
            }
          }
        }
      }
      // 查看是否设置成功
      // console.log(proxy.plot_geometries)
    },

    // 添加color
    setSVGStyle(iPlotParts, StrokeW, iColor) {
      // console.log(iPlotParts)
      const len = iPlotParts.geoData.length;
      let maxWidth = 0;
      // 循环每个组成部件，查找最大线宽度值；point类型排除在外
      for (let i = 0; i < len; i++) {
        const xPart = iPlotParts.geoData[i];
        if (xPart.type.toLowerCase() !== "point") {
          const w = xPart.style.width;
          if (w) {
            if (w > maxWidth) {
              maxWidth = w;
            }
          }
        }
      } // 查找最大线宽度值-结束
      // console.log(maxWidth)
      for (let i = 0; i < len; i++) {
        const xPart = iPlotParts.geoData[i];
        if (xPart.type.toLowerCase() !== "point") {
          const w = xPart.style.width;
          if (w) {
            // 如果w非null
            // console.log(w === maxWidth)
            if (w === maxWidth) {
              // console.log('设置最大宽度')
              // iPlotParts.geoData[i].style.width = StrokeW
              proxy.plot_geometries.geoData[i].style.width = StrokeW;
            } else {
              // console.log(w / maxWidth * StrokeW)
              proxy.plot_geometries.geoData[i].style.width =
                (w / maxWidth) * StrokeW;
            }
          } // 线宽设置结束

          // 军标主颜色设置
          // console.log(xPart)
          const xFill = xPart.style.fill;
          const xStroke = xPart.style.stroke;
          if (
            xFill &&
            xFill !== "none" &&
            xFill !== "#003F98" &&
            xFill !== "#FFF000" &&
            xFill !== "#009944" &&
            xFill !== "#004097" &&
            xFill !== "#ffffff" &&
            xFill !== "#000000" &&
            xFill !== "#FF0000" &&
            xFill !== "#0000FF" &&
            xFill !== "#00FF00" &&
            xFill !== "#FF60AF"
          ) {
            proxy.plot_geometries.geoData[i].style.fill = iColor;
          }
          if (
            xStroke &&
            xStroke !== "none" &&
            xStroke !== "#003F98" &&
            xStroke !== "#FFF000" &&
            xStroke !== "#009944" &&
            xStroke !== "#004097" &&
            xStroke !== "#FF0000" &&
            xStroke !== "#0000FF" &&
            xStroke !== "#00FF00" &&
            xStroke !== "#FF60AF"
          ) {
            proxy.plot_geometries.geoData[i].style.stroke = iColor;
          }
        }
      }
      // 查看是否设置成功
      // console.log(proxy.plot_geometries)
    },

    // 合并选择区域Data
    plotUnion() {
      const plotNum = proxy.xData.length;
      const options = { steps: 40, units: "kilometers", properties: {} };
      let xPart = null;
      const polyList = []; // 记录生成的每个警报器范围多边形--合并时使用
      // let unionRes = null
      if (plotNum < 1) return;
      for (let i = 0; i < plotNum; i++) {
        xPart = proxy.xData[i].id.split("_");
        if (xPart[0] === "unionRange") {
          // console.log(proxy.xData[i].id, proxy.xData[i].name)
          // 目前范围只支持元this.xData[i].name === Circle，不再做校验
          const center = turf.toWgs84(turf.point(proxy.xData[i].cp[0]));
          const radius =
            Math.sqrt(
              (proxy.xData[i].cp[1][0] - proxy.xData[i].cp[0][0]) *
                (proxy.xData[i].cp[1][0] - proxy.xData[i].cp[0][0]) +
                (proxy.xData[i].cp[1][1] - proxy.xData[i].cp[0][1]) *
                  (proxy.xData[i].cp[1][1] - proxy.xData[i].cp[0][1])
            ) / 1000;
          const circle = turf.circle(center, radius, options);
          polyList.push(turf.polygon(circle.geometry.coordinates));
        }
      }
      // 根据生成的多边形进行合并操作
      const unionRes = null; // 合并后最终结果
      const myUnion = turf.union; // 合并别名
      let iParam = "myUnion("; // 参数拼接
      // feature参数
      const idStr = "rang_" + new Date().valueOf(); // 警报器范围id
      // 生成合并使用参数！
      for (let j = 0; j < polyList.length; j++) {
        iParam = iParam + "polyList[" + j + "], ";
      }
      if (iParam !== "myUnion(") {
        iParam = iParam.slice(0, -2);
        iParam = iParam + ")";
        // console.log(iParam)
        // let union = turf.union(polyList[0], polyList[1])
        const unionRes = eval(iParam);
        // console.log(unionRes)
        const coords = [];
        // 根据返回数据生成范围多边形
        if (unionRes.geometry.type === "Polygon") {
          // 创建多边形并显示
          const cPnts = unionRes.geometry.coordinates;
          proxy.createRangePolygon(cPnts, idStr);
        } else if (unionRes.geometry.type === "MultiPolygon") {
          // 创建每个多边形
          const polyArr = unionRes.geometry.coordinates;
          for (let p = 0; p < polyArr.length; p++) {
            const cPnts = polyArr[p];
            proxy.createRangePolygon(cPnts, idStr);
          }
        }
      }
    },

    // 生成范围多变形
    // 参数：cPnts-生成的多边形的坐标点; gid多边形组id
    createRangePolygon(cPnts, gid) {
      // console.log(gid)
      const coords = [];
      for (let x = 0; x < cPnts.length; x++) {
        const xPnt = cPnts[x];
        const newPnt = xPnt.map((d) => {
          // 将坐标转换成投影坐标(w84-->3857)
          const c = turf.toMercator(turf.point(d));
          return [c.geometry.coordinates[0], c.geometry.coordinates[1]];
        });
        coords.push(newPnt);
      }
      const iGeom = new Polygon(coords);
      const iFeature = new Feature(iGeom);
      iFeature.set("gid", gid);
      iFeature.set("type", "PLOT");
      // proxy.plottingLayer.getSource().addFeature(iFeature)
      // 样式设置
      iFeature.setStyle(
        new Style({
          fill: new Fill({
            // ol.style.Fill
            color: "rgba(255,0,0,0)",
          }),
          stroke: new Stroke({
            // ol.style.Stroke
            color: proxy.currColor,
            width: proxy.strokeWidth,
          }),
        })
      );
      proxy.plottingLayer.getSource().addFeature(iFeature);
      proxy.setCurrPlotStyle("rgba(0,0,0,0)", proxy.currColor, proxy.strokeWidth);
      // 保存到xData数据文件中
      proxy.currPlot.id = gid;
      proxy.currPlot.name = iFeature.getGeometry().getType(); // 类型为多边形 还是iType？
      proxy.currPlot.cp = iFeature.getGeometry().getCoordinates(); // ctrlpoint控制点，包含中心点
      proxy.currPlot.scale = 1;
      proxy.currPlot.rotate = 0;
      proxy.currPlot.color = proxy.currColor; // 颜色（样式需要更详细些，可能还会有虚线！）
      proxy.currPlot.unit = null; // 基础多边形不需要次属性
      proxy.currPlot.attach = null; // 关联文字数组！
      proxy.currPlot.boxWH = null; // polygon不需要此数据
      // 添加数据
      proxy.currPlotAddUserTime(); // 添加用户和时间戳
      const dCache = JSON.parse(JSON.stringify(proxy.currPlot));
      proxy.xData.push(dCache);
    },

    showUnionRange(isDisplay) {
      const xSource = proxy.plottingLayer.getSource();
      xSource.getFeatures().forEach(function (feature) {
        const xid = feature.get("gid");
        const gid = xid.substr(0, 4);
        if (gid === "unio") {
          xSource.removeFeature(feature);
        }
      });
      // 显示
      if (isDisplay) {
        for (let i = 0; i < proxy.xData.length; i++) {
          if (proxy.xData[i].id.substr(0, 4) === "unio") {
            proxy.createBasePlot(proxy.xData[i]);
          }
        }
      }
    },

    /**
     * @description 使用数据添加军标
     * @param sPlotID {String}军标ID（名称）, aPnts {Array} 绘制军标所需控制点, [[经度，纬度]，[经度，纬度]...]
     *        aUnit {Array}军标尺寸（米）, sColor军标颜色(缺省为红色), cls {boolean} 是否清除原有数据，默认清空
     *        sTxt 要添加的文字，默认为空null表示不添加; oPop {Object} 军标的气泡信息，默认为空null表示不添加
     * @return 无
     */
    // async data2plot (sPlotID, aPnts, aUnit, sTxt = null, oPop = null) {
    //   // await proxy.sleep(500)
    //   console.log(sPlotID, aPnts, aUnit)
    //   let value = sPlotID
    //   if (sPlotID.length < 4) return // 长度不满足要求不做处理
    //   const drawType = sPlotID.substr(0, 4).toLowerCase()
    //   if (drawType === 'icon' || drawType === 'dire' || drawType === 'mult' || drawType === 'ddir') { // 三种vector类型处理
    //     value = drawType
    //   }
    //   const idStr = drawType + '_' + (new Date()).valueOf() // 创建军标唯一标识
    //   const sRCS = proxy.iMap.getView().getProjection().getCode() // 获得当前地图坐标系（this.$parent.conf.RCS）
    //   if (value === 'icon') { // 绘制军标
    //     proxy.$refs.pVec.clearPlotData() // 清楚原有的svg军标数据
    //     proxy.$refs.pVec.getPlotData(sPlotID) // 调用军标绘制所需要的SVG -- 可能需要延时处理
    //     await proxy.sleep(500) // 等待军标数据加载完成
    //     let screenCoord
    //     if (proxy.sSRS !== sRCS) { // 坐标转换
    //       const cpx1 = olProj.transform(aPnts[0], proxy.sSRS, sRCS)
    //       screenCoord = proxy.iMap.getPixelFromCoordinate(cpx1)
    //     } else {
    //       // 将地理坐标转换成屏幕坐标
    //       screenCoord = proxy.iMap.getPixelFromCoordinate(aPnts[0])
    //     }
    //     console.log(screenCoord)
    //     // 获得生成的军标图元{geoType：'xxx', geodata:[{},{}]}
    //     // proxy.plot_geometries = proxy.$refs.pVec.getFeature([screenCoord], value, proxy.$parent.iActType, proxy.iMap)
    //     proxy.plot_geometries = proxy.$refs.pVec.getFeature([screenCoord], value, sPlotID, proxy.iMap)
    //     // let geometryList = proxy.parseGeometry(newCoordinates)
    //     // 设置军标的线宽
    //     // proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth)
    //     proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth, proxy.currColor)
    //     // console.log(proxy.plot_geometries)
    //     proxy.geom2Featrue(proxy.plot_geometries) // 将军标绘制到标绘层（样式处理）
    //     proxy.endPlotting()
    //     // 将当前军标写入，军标数组！
    //     proxy.xData.push(JSON.parse(JSON.stringify(proxy.currPlot)))
    //   } else if (value === 'dire') {
    //     proxy.$refs.pVec.clearPlotData()
    //     // 调用军标绘制所需要的SVG -- 可能需要延时处理
    //     proxy.$refs.pVec.getPlotData(sPlotID)
    //     await proxy.sleep(500)
    //     console.log(value)
    //     let cp1
    //     let cp2
    //     console.log(aPnts)
    //     console.log(aPnts.length)
    //     // const sRCS = proxy.iMap.getView().getProjection().getCode() // 获得当前地图坐标系（this.$parent.conf.RCS）
    //     if (aPnts.length === 1) { // 如果控制点小于2需要创建第二个控制点
    //       // 方案的默认数据是'EPSG:4326'，要先转换成'EPSG:3857'，否则无法 与单位尺寸（米）进行计算
    //       const cp = olProj.transform(aPnts[0], proxy.sSRS, 'EPSG:3857')
    //       // 如果当前地图坐标不是'EPSG:3857'，要将坐标转换成地图使用坐标系统
    //       if (sRCS !== 'EPSG:3857') {
    //         cp1 = olProj.transform([cp[0] - aUnit[0], cp[1]], 'EPSG:3857', sRCS)
    //         cp2 = olProj.transform([cp[0] + aUnit[0], cp[1]], 'EPSG:3857', sRCS)
    //         cp1 = proxy.iMap.getPixelFromCoordinate(cp1)
    //         cp2 = proxy.iMap.getPixelFromCoordinate(cp2)
    //       } else {
    //         cp1 = proxy.iMap.getPixelFromCoordinate([cp[0] - aUnit[0], cp[1]])
    //         cp2 = proxy.iMap.getPixelFromCoordinate([cp[0] + aUnit[0], cp[1]])
    //       }
    //       // cp1 = proxy.iMap.getPixelFromCoordinate(cp1x) // 控制点1：中心点 --> 屏幕坐标
    //       // cp2 = proxy.iMap.getPixelFromCoordinate(cp2x) // 控制点2：方向点 --> 屏幕坐标
    //       // console.log(cp, cp1, cp2)
    //     } else if (aPnts.length > 1) { //  else if (aPnts.length > 2)
    //       // const cpx1 = olProj.transform(aPnts[0], 'EPSG:4326', 'EPSG:3857')
    //       // const cpx2 = olProj.transform(aPnts[1], 'EPSG:4326', 'EPSG:3857')
    //       // 有两个控制点，不需要进行计算获取第二空控制点，所以不用先转换成'EPSG:3857'
    //       if (proxy.sSRS !== sRCS) { // 如果数据坐标与地图坐标不相同，需要将坐标转换成地图坐标
    //         const cpx1 = olProj.transform(aPnts[0], proxy.sSRS, sRCS)
    //         const cpx2 = olProj.transform(aPnts[1], proxy.sSRS, sRCS)
    //         cp1 = proxy.iMap.getPixelFromCoordinate(cpx1) // aPnts[0]) // 控制点1：中心点
    //         cp2 = proxy.iMap.getPixelFromCoordinate(cpx2) // aPnts[1]) // 控制点2：方向点
    //       } else {
    //         cp1 = proxy.iMap.getPixelFromCoordinate(aPnts[0]) // aPnts[0]) // 控制点1：中心点
    //         cp2 = proxy.iMap.getPixelFromCoordinate(aPnts[1]) // aPnts[1]) // 控制点2：方向点
    //       }
    //     } else {
    //       return
    //     }
    //     console.log(cp1, cp2)
    //     console.log(proxy.currPlot)
    //     // 军标数据获取
    //     proxy.plot_geometries = proxy.$refs.pVec.getFeature([cp1, cp2], drawType, sPlotID, proxy.iMap)
    //     console.log(proxy.plot_geometries)
    //     proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth, proxy.currColor) // 设置军标的样式
    //     proxy.geom2Featrue()
    //   } else if (value === 'ddir') {
    //     if (aPnts.length < 2) return // 定向军标需要两个控制点（原点和方向）
    //     // 坐标要使用屏幕坐标
    //     let cp1
    //     let cp2
    //     if (proxy.sSRS !== sRCS) { // 如果数据坐标与地图坐标不相同，需要将坐标转换成地图坐标
    //         const cpx1 = olProj.transform(aPnts[0], proxy.sSRS, sRCS)
    //         const cpx2 = olProj.transform(aPnts[1], proxy.sSRS, sRCS)
    //         cp1 = proxy.iMap.getPixelFromCoordinate(cpx1) // aPnts[0]) // 控制点1：中心点
    //         cp2 = proxy.iMap.getPixelFromCoordinate(cpx2) // aPnts[1]) // 控制点2：方向点
    //       } else {
    //         cp1 = proxy.iMap.getPixelFromCoordinate(aPnts[0]) // aPnts[0]) // 控制点1：中心点
    //         cp2 = proxy.iMap.getPixelFromCoordinate(aPnts[1]) // aPnts[1]) // 控制点2：方向点
    //       }
    //     // const dx = cPnts[1][0] - cPnts[0][0] // 水平方向差值
    //     // const dy = cPnts[1][1] - cPnts[0][1] // 垂直方向差值
    //     const dy = cp2[1] - cp1[1]
    //     console.log(cp2[1], '-', cp1[1], '=', dy)
    //     const xTail = proxy.currPlot.name.substr(proxy.currPlot.name.length - 1, 1)
    //     // console.log(xTail)
    //     if (dy >= 0) {
    //       proxy.$refs.pVec.clearPlotData() // 清空svg军标数据
    //       proxy.$refs.pVec.getPlotData(sPlotID + '@') // 调用军标绘制所需要的SVG -- 可能需要延时处理
    //       await proxy.sleep(200) // 延时处理
    //     } else {
    //       proxy.$refs.pVec.clearPlotData() // 清空svg军标数据
    //       proxy.$refs.pVec.getPlotData(sPlotID) // 调用军标绘制所需要的SVG -- 可能需要延时处理
    //       await proxy.sleep(200) // 延时处理
    //     }
    //     proxy.plot_geometries = proxy.$refs.pVec.getFeature([cp1, cp2], drawType, sPlotID, proxy.iMap)
    //     console.log(proxy.plot_geometries)
    //     proxy.setSVGStyle(proxy.plot_geometries, proxy.strokeWidth, proxy.currColor) // 设置军标的样式
    //     proxy.geom2Featrue()
    //     // await proxy.sleep(1000)
    //   } else if (value === 'mult') {
    //     // 获取绘制方法名称 mult_getSimpleArrowPnts
    //     let funName = sPlotID.split('_')[1]
    //     // 获取绘制点数_名称最后一位
    //     const maxPnt = funName.substr(funName.length - 1, 1)
    //     // 最后一位为数字，需要设置绘制控制点数量，修改方法名称
    //     let nMaxPoints = null
    //     if (!isNaN(maxPnt)) { // || (isNaN(maxPnt) && isNaN(maxPnt) > 0)) {
    //       nMaxPoints = parseInt(maxPnt)
    //       funName = funName.substr(0, funName.length - 1)
    //     }
    //     if (nMaxPoints && nMaxPoints !== aPnts.length) {
    //       return
    //     }
    //     // console.log(funName)
    //     if (!funName) return
    //     // 查看方法是否存在，不存在退出！
    //     const func = plot.getFunc(funName)
    //     // 方法不存在退出绘制！
    //     if (!func) return
    //     // 坐标转换
    //     console.log(aPnts)
    //     let newPnt = []
    //     for (let i = 0; i < aPnts.length; i++) {
    //       console.log(aPnts)
    //       let coord
    //       // const coord = olProj.transform(aPnts[i], 'EPSG:4326', 'EPSG:3857')
    //       // 如果数据坐标系不等于地图坐标系，需要转换成地图坐标系
    //       console.log(proxy.sSRS, sRCS)
    //       if (proxy.sSRS !== sRCS) {
    //         coord = olProj.transform(aPnts[i], proxy.sSRS, sRCS)
    //       } else {
    //         coord = aPnts[i]
    //       }
    //       newPnt.push(coord)
    //     }
    //     if (newPnt.length === 2) {
    //       console.dir(newPnt)
    //       const midPnt = [(newPnt[0][0] + newPnt[1][0]) / 2, (newPnt[0][1] + newPnt[1][1]) / 2]
    //       newPnt.splice(1, 0, midPnt)
    //     }
    //     console.log(newPnt)
    //     // 调用绘制方法，绘制箭头
    //     proxy.plot_geometries = func(newPnt)
    //     console.log(proxy.plot_geometries)
    //     // 绘制完箭头后渲染
    //     const iStyle = {
    //       fill: 'none', // proxy.currColor,
    //       stroke: proxy.currColor,
    //       width: proxy.strokeWidth // 2
    //     }
    //     // mult类型样式补全
    //     for (let i = 0; i < proxy.plot_geometries.geoData.length; i++) {
    //       // let iType = proxy.plot_geometries.geoData[i].type
    //       // proxy.plot_geometries.geoData[i].gid = gID  // 此处应该保持统一使用idStr-方法开始出给出
    //       proxy.plot_geometries.geoData[i].gid = idStr
    //       // proxy.plot_geometries.geoData[i].style = iStyle
    //       proxy.plot_geometries.geoData[i].style = JSON.parse(JSON.stringify(iStyle))
    //       // console.log(iStyle)
    //     }

    //     // console.log(proxy.iType)
    //     // 实心箭头和虚线箭头样式设置（需要调整-见下面）
    //     if (proxy.iType === 'mult_getSSArrowPnts' || proxy.iType === 'mult_dashArrowPnts' || proxy.iType === 'mult_pathArrowPnts' || proxy.iType === 'mult_dashPathArrowPnts') {
    //       proxy.plot_geometries.geoData[0].style.fill = proxy.currColor
    //       proxy.plot_geometries.geoData[0].style.width = 0
    //     }

    //     // 新添加的带轮线（箭头要填充！）
    //     if (proxy.iType === 'mult_getCyyLine') {
    //       // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
    //       proxy.plot_geometries.geoData[0].style.fill = proxy.currColor
    //       proxy.plot_geometries.geoData[0].style.width = 0
    //       proxy.plot_geometries.geoData[2].style.stroke = '#000000'
    //       proxy.plot_geometries.geoData[2].color = '#000000'
    //       // console.log(proxy.currPlot, proxy.currPlot.cp.length)
    //       if (proxy.currPlot.cp.length === 2) {
    //         const cp1 = proxy.currPlot.cp[0]
    //         const cp2 = proxy.currPlot.cp[1]
    //         const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2]
    //         proxy.currPlot.cp.splice(1, 0, midPnt)
    //       }
    //     }
    //     // 摩托化行进
    //     if (proxy.iType === 'mult_getMotorLine') {
    //       // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
    //       proxy.plot_geometries.geoData[0].style.fill = proxy.currColor
    //       proxy.plot_geometries.geoData[0].style.width = 0
    //       // console.log(proxy.currPlot, proxy.currPlot.cp.length)
    //       if (proxy.currPlot.cp.length === 2) {
    //         const cp1 = proxy.currPlot.cp[0]
    //         const cp2 = proxy.currPlot.cp[1]
    //         const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2]
    //         proxy.currPlot.cp.splice(1, 0, midPnt)
    //       }
    //     }
    //     // 伴随线
    //     if (proxy.iType === 'mult_getFollowLine') {
    //       // 组成图形的顺序[箭头多边形，主曲线，辅助曲线，圆轮xn]
    //       proxy.plot_geometries.geoData[0].style.fill = proxy.currColor
    //       proxy.plot_geometries.geoData[0].style.width = 0
    //       proxy.plot_geometries.geoData[2].style.stroke = '#DEB887'
    //       // console.log(proxy.currPlot, proxy.currPlot.cp.length)
    //       if (proxy.currPlot.cp.length === 2) {
    //         const cp1 = proxy.currPlot.cp[0]
    //         const cp2 = proxy.currPlot.cp[1]
    //         const midPnt = [(cp1[0] + cp2[0]) / 2, (cp1[1] + cp2[1]) / 2]
    //         proxy.currPlot.cp.splice(1, 0, midPnt)
    //       }
    //     }

    //     // 虚线的处理
    //     if (proxy.iType === 'mult_dashArrowPnts' || proxy.iType === 'mult_dashPathArrowPnts') {
    //       proxy.plot_geometries.geoData[1].style.lineDash = [20, 10]
    //     }
    //     // 将标绘图形加入标绘层
    //     proxy.geom2Featrue()
    //     // 当前会信息补全
    //     proxy.currPlot.id = idStr
    //     proxy.currPlot.name = sPlotID // 类型为多边形 还是iType？
    //     proxy.currPlot.cp = newPnt // ctrlpoint控制点，包含中心点 已经在绘制时更新
    //     proxy.currPlot.scale = 1
    //     proxy.currPlot.rotate = 0
    //     proxy.currPlot.color = proxy.currColor // 颜色（样式需要更详细些，可能还会有虚线！）
    //     proxy.currPlot.unit = null // 基础多边形不需要次属性
    //     proxy.currPlot.attach = null // 关联文字数组！
    //     proxy.currPlot.boxWH = null // mult不需要此数据
    //   } // else if (value === 'text')
    //   const dCache = JSON.parse(JSON.stringify(proxy.currPlot))
    //   proxy.xData.push(dCache)

    //   let aTxtCoord
    //   if (sTxt) {
    //     console.log('需要添加文本内容' + sTxt)
    //     if (sPlotID === 'mult_getSimpleArrowEW') { // || sPlotID === 'mult_pathArrowPnts'
    //       aTxtCoord = proxy.currPlot.cp[1]
    //     } else {
    //       aTxtCoord = proxy.getPlotCenter(proxy.currPlot)// 获得军标的中心位置
    //     }
    //     console.log(aTxtCoord, idStr)
    //     const sTxtID = 'text_' + idStr + '_0' // _0 关联文字数量txtNum
    //     // 创建文字currPlot信息，然后调用方法;basePnt, txtID, txt = '请添加文字', fontStyle = 'normal 12px 微软雅黑'
    //     proxy.createTxtPnt(aTxtCoord, sTxtID, sTxt) // 文字去掉了白边
    //     // proxy.createTxtPlot(currPlot)
    //     proxy.addText2xData(idStr, sTxtID)
    //   }
    //   // 新添加的弹出气泡信息
    //   if (oPop) {
    //     // 调用plotPanel中的addPlotPop(sPlotID, oPopInfos) 参数：军标的ID,军标提示气泡信息
    //     // console.log(sPlotID, proxy.currPlot.id)
    //     proxy.addPlotPop(proxy.currPlot.id, oPop) // 最终会在xData中找到对应的军标并添加pop气泡信息
    //   }
    //   console.log(proxy.xData)
    // }
    // 当前方法
  },
});
</script>

<style scoped lang="scss">
#plottPanel {
  width: 220px;
  border: 1px solid #646464;
  background-color: #f0f0f0;
  position: absolute;
  right: 100px;
  top: 100px;
  z-index: 999;
}
.panel-header {
  width: 100%;
  height: 20px;
  background-color: #bbb;
  color: #333;
  font-family: "Microsoft Yahei";
  font-size: 12px;
  vertical-align: middle;
}
span {
  margin-left: 10px;
}
#xbtn {
  float: right;
  margin-right: 5px;
  &:hover {
    cursor: pointer;
  }
}
.toolgrid {
  margin: 5px 12px;
  font-family: "Microsoft Yahei";
  font-size: 10px;
  input {
    height: 12px;
    color: #999;
    font-family: "Microsoft Yahei";
    font-size: 12px;
    margin-left: 4px;
    margin-right: 2px;
  }
  textarea {
    width: 175px;
    color: #999;
    font-family: "Microsoft Yahei";
    font-size: 12px;
    margin-left: 4px;
    margin-right: 2px;
  }
}
.w155 {
  width: 155px;
}
.w140 {
  width: 140px;
}
.w120 {
  width: 120px;
}
.w58 {
  width: 56px;
}
.w36 {
  width: 36px;
}
.boot {
  margin-bottom: 8px;
}
.showBox {
  text-align: center;
  background-color: #808080;
  width: 100%;
  height: 7px;
}
.showbtn {
  text-align: center;
}
a {
  color: #eee;
}
.bottomline {
  border-bottom: 1px solid #808080;
}
.baseBtnBox {
  text-align: center;
  margin-top: 5px;
}
</style>
